-
Notifications
You must be signed in to change notification settings - Fork 6
Framework Migration
-_- edited this page Jan 15, 2025
·
82 revisions
/*
Scope:
publicRuntimeConfig: These configuration values are accessible on both the server and the client. This means any value defined here can be accessed and used in your client-side code.
privateRuntimeConfig: These configuration values are only accessible on the server side. They are not exposed to the client, making them suitable for sensitive data that should not be exposed to the client.
Security:
publicRuntimeConfig: Since values here are available on the client side, they should not contain sensitive information such as API keys or secrets.
privateRuntimeConfig: Safe to store sensitive information as these values are only accessible on the server.
Access:
publicRuntimeConfig: You can access these values using this.$config in your Vue components and context.$config in the Nuxt context.
privateRuntimeConfig: These values are accessible in server-side code, such as server middleware, API routes, and server-side Vue components.
*/
export default {
publicRuntimeConfig: {
apiBase: process.env.API_BASE || 'https://api.example.com',
googleAnalyticsId: process.env.GOOGLE_ANALYTICS_ID
},
privateRuntimeConfig: {
apiSecret: process.env.API_SECRET,
dbPassword: process.env.DB_PASSWORD
}
}
- 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/"