-
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>Vue 3, Pinia, Axios, and Vue Router</title>
<!-- Load Vue 3 via CDN -->
<script src="https://unpkg.com/vue@next"></script>
<!-- Load Vue Router via CDN -->
<script src="https://unpkg.com/vue-router@next"></script>
<!-- Load Pinia via CDN -->
<script src="https://unpkg.com/pinia@next"></script>
<!-- Load Axios via CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- Your custom JavaScript -->
<script type="module">
// Create a Pinia store with a variable foo
import { createPinia, defineStore } from 'https://unpkg.com/pinia@next';
import { createRouter, createWebHistory } from 'https://unpkg.com/vue-router@next';
import { createApp, ref } from 'https://unpkg.com/vue@next';
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 };
}
// Define Vue components
const HomeComponent = {
template: '<div>Home Component</div>'
};
const AboutComponent = {
template: '<div>About Component</div>'
};
// Set up Vue Router
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent }
];
const router = createRouter({
history: createWebHistory(),
routes
});
// Create Vue app
const app = createApp({
setup() {
const store = useStore();
const { bar } = useBar();
return { store, bar };
},
template: `
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
<h1>{{ store.foo }}</h1>
<h1>{{ bar }}</h1>
</div>
`
});
// Use Pinia and Router
app.use(createPinia());
app.use(router);
// Mount app
app.mount('#app');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 2, Vue Router, Vuex, and Axios</title>
<!-- Load Vue 2 via CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Load Vue Router via CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
<!-- Load Vuex via CDN -->
<script src="https://cdn.jsdelivr.net/npm/vuex@3"></script>
<!-- Load Axios via CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- Your custom JavaScript -->
<script>
// Create a Vuex store
const store = new Vuex.Store({
state: {
foo: 'Hello from Vuex store!'
},
mutations: {
setFoo(state, newFoo) {
state.foo = newFoo;
}
},
actions: {
fetchFoo({ commit }) {
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
commit('setFoo', response.data.title);
});
}
}
});
// Define Vue components
const HomeComponent = {
template: '<div>Home Component</div>'
};
const AboutComponent = {
template: '<div>About Component</div>'
};
// Set up Vue Router
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent }
];
const router = new VueRouter({
routes
});
// Create Vue app
new Vue({
el: '#app',
store,
router,
data() {
return {
bar: 'Hello from Composition API hook!'
};
},
template: `
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
<h1>{{ $store.state.foo }}</h1>
<h1>{{ bar }}</h1>
</div>
`,
created() {
this.$store.dispatch('fetchFoo');
}
});
</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/"