---
# System prepended metadata

title: Vue - sandbox
tags: [Vue]

---

---
tags: Vue
---
# Vue - sandbox
Fork them 🤠

### [vue 2.6.12 vue-cli@4.5.17(based on webpack@4.46.0)](https://codesandbox.io/s/unruffled-david-ze21ex)
- [vanilia](https://codesandbox.io/s/confident-germain-z00c55)
- [stackoverflow - editor](https://codesandbox.io/s/busy-dubinsky-li74bp)
- [router + vuex](https://codesandbox.io/s/hungry-silence-5hp031)
    - [named views](https://codesandbox.io/s/upbeat-glade-m6x223)
- [scss (sass + sass-loader)]()
- Misc
    - [parse v-html](https://codesandbox.io/s/thirsty-cherry-0qb3e8)
    - [directive](https://codesandbox.io/s/hardcore-black-z6gv2m)
    - [filter](https://codesandbox.io/s/busy-wozniak-mtvscp)
    - [slot scope](https://codesandbox.io/s/vanilia-vue-z00c55-forked-jfg7yv)
- Trial / Prototype
    - [moment.js locale formatting](https://codesandbox.io/s/vanilia-vue-z00c55-forked-ytpl72)
    - [Button state change / cool down](https://codesandbox.io/s/vanilia-vue-z00c55-forked-n3lv97)
- Advanced / Hacks
    - [rander virtual DOM , Render Prop](https://codesandbox.io/s/vanilia-vue-z00c55-forked-xd6y2n)
    - [timer - cloud (webpack)](https://codesandbox.io/p/sandbox/vanilia-vue-z00c55-forked-mzgz6t)

> [path alias](https://codesandbox.io/s/gifted-pine-0dy1o7)
> https://github.com/vuejs/vue-cli/issues/2398


error boundary
error captured

https://v2.cn.vuejs.org/v2/guide/custom-directive.html
在 Vue 3 的 `mounted`，在 Vue 2 會變為 `inserted`

[Using Vue with TypeScript | Vue.js (vuejs.org)](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode)


https://www.lionad.art/articles/source-code/vuejs/error-boundary.html

### React 18.0.0
- [vanilia](https://codesandbox.io/s/elegant-sanderson-fd4t9b)  
- [vite + react](https://codesandbox.io/p/sandbox/fervent-banzai-z8m3cx)  
- Misc
    - [`useEffect`](https://codesandbox.io/s/naughty-fire-2p7dcs)
    - [`ContextProvider`](https://codesandbox.io/s/keen-flower-dmzghz)
    - [`Render props`](https://codesandbox.io/s/friendly-spence-phyczp)
    - []()  
        1. complex state logic that involves multiple sub-values
        2. the next state depends on the previous one
        3. trigger deep updates
        4. [pass `dispatch` down instead of callbacks](https://legacy.reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)
- shadcn ui 
    - [shadcn ui - toast@vite](https://codesandbox.io/p/sandbox/twilight-dawn-f7v7xg)
        
        
[redux-utilities/redux-actions: Flux Standard Action utilities for Redux. (github.com)](https://github.com/redux-utilities/redux-actions)
[redux-utilities/flux-standard-action: A human-friendly standard for Flux action objects. (github.com)](https://github.com/redux-utilities/flux-standard-action)


[Spotify for Podcasters iOS | Mobbin](https://mobbin.com/apps/spotify-for-podcasters-ios-16f606d6-312a-46db-9f2f-c40a7c45a6e9/c783ba50-3286-4e57-91d9-de9404bfc199/screens)
