Skip to content

Framework Migration

Jump to bottom Edit New page
-_- edited this page Jan 15, 2025 · 82 revisions

Freelancing

Nuxt

/*
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.
*/

import axios from 'axios';

export default async () => {
  const { data } = await axios.get('https://api.example.com/config');

  return {
    publicRuntimeConfig: {
      apiBase: process.env.API_BASE || data.apiBase,
    },
    privateRuntimeConfig: {
      apiSecret: process.env.API_SECRET || data.apiSecret,
    },
  };
};

Vue.js

Vue3

JSFiddle

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

Vue2

JSFiddle

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

Github Issue Details

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/"

Window Object Keys

Framework Specific Object Literals:

Framework Window Object Key(s)
Nuxt __nuxt__
Vue 2 Vue, Vuex
Vue 3 Vue, Vuex
Angular.js $window
Angular $window, ng, ngCore
Ember Em, Ember
Svelte svelte, Svelte
Solid.js solid
Mithril.js m, Mithril
Backbone.js Backbone, _, $

Games

Add a custom sidebar

Clone this wiki locally