---
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)