-
Notifications
You must be signed in to change notification settings - Fork 6
Framework Migration
-_- edited this page Jan 14, 2025
·
82 revisions
- Migration from AngularJS to Vue: https://www.slideshare.net/michailkuznetsov/vuejs-for-angular-developers
- Comparison of Redux and VueX:https://www.codementor.io/@petarvukasinovic/redux-vs-vuex-for-state-management-in-vue-js-n10yd7g2f
- https://medium.com/@Pier/vue-js-the-good-the-meh-and-the-ugly-82800bbe6684
- https://codewithhugo.com/from-angularjs-to-vue.js-commonjs-and-jest/
- https://tpalmer75.github.io/AngularToVue/
- https://madewithvuejs.com/blog/vue-3-roundup
- https://dev.to/chenxeed/awesome-breaking-changes-in-vue-3-if-you-migrate-from-vue-2-3b98
- https://jsfiddle.net/szabi/davn5bbp/
- https://jsfiddle.net/thebigsurf/sewvqspq/
- https://jsfiddle.net/9fpuctnL/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nuxt 3 Simulation in JSFiddle</title>
<!-- Load Vue 3 via CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- Load Pinia via CDN -->
<script src="https://cdn.jsdelivr.net/npm/pinia@next"></script>
</head>
<body>
<div id="app"></div>
<!-- Your custom JavaScript -->
<script type="module">
// Set window.__NUXT__ with cdnURL and basePath
window.__NUXT__ = {
cdnURL: "https://cdn.jsdelivr.net",
basePath: "/npm/nuxt@3/"
};
import { createApp, ref } from 'vue';
import { createPinia, defineStore } from 'pinia';
// Create a Pinia store with a variable foo
const useStore = defineStore('main', {
state: () => ({
foo: 'Hello from Pinia store!'
})
});
// Composition API hook with a variable bar
function useBar() {
const bar = ref('Hello from Composition API hook!');
return { bar };
}
// Create Vue app
const app = createApp({
setup() {
const store = useStore();
const { bar } = useBar();
return { store, bar };
},
template: `
<div>
<h1>{{ store.foo }}</h1>
<h1>{{ bar }}</h1>
</div>
`
});
// Use Pinia
app.use(createPinia());
// Mount app
app.mount('#app');
</script>
</body>
</html>
documentation:
- name: "GitHub Issue - Extract window.__NUXT__ to <script>"
description: "Discusses how to extract `window.__NUXT__` to a `<script>` tag for SEO purposes."
url: "https://github.com/nuxt/nuxt/issues/8548"
- name: "GitHub Issue - Remove window.__NUXT__ once app initialises"
description: "Discusses the use of `window.__NUXT__` for backward compatibility and its removal in future versions."
url: "https://github.com/nuxt/nuxt/issues/25336"
- name: "Nuxt Documentation - The Context"
description: "Explains the context object, which includes `window.__NUXT__`."
url: "https://v2.nuxt.com/docs/internals-glossary/context/"