Skip to content

Framework Migration

Jump to bottom Edit New page
-_- edited this page Feb 12, 2025 · 82 revisions

Resources

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, _, $

URLSearchParams Method Definition and Test

jQuery

Plain JS

function getQueryParam(key) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(key);
}

jQuery Usage

$(document).ready(function() {
    // Store the function object
    $(document).data('getQueryParam', getQueryParam);

    // Retrieve and use the function
    const getQueryParam = $(document).data('getQueryParam');
    const value = getQueryParam('foo');
    
    // Assert the query parameter
    if (value === 'bar') {
        console.log("The query parameter 'foo' has the value 'bar'");
    } else {
        console.log("The query parameter 'foo' does not have the value 'bar'");
    }
});

JQuery QUnit Test

QUnit.test("Query string contains key 'foo' with value 'bar'", function(assert) { 
    const getQueryParam = $(document).data('getQueryParam'); 
    const value = getQueryParam('foo'); 
    assert.equal(value, 'bar', "The query parameter 'foo' should have the value 'bar'"); });

Angular

Angular Service

// query-params.service.ts
import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class QueryParamsService {
  constructor(private route: ActivatedRoute) {}

  getQueryParam(key: string): string | null {
    return this.route.snapshot.queryParamMap.get(key);
  }
}

Jest Test

// query-params.service.spec.ts
import { Injector } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { QueryParamsService } from './query-params.service';

describe('QueryParamsService', () => {
  let injector: Injector;
  let service: QueryParamsService;

  beforeEach(() => {
    injector = Injector.create({
      providers: [
        QueryParamsService,
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {
              queryParamMap: {
                get: (key: string) => (key === 'foo' ? 'bar' : null),
              },
            },
          },
        },
      ],
    });
    service = injector.get(QueryParamsService);
  });

  it("should have query parameter 'foo' with value 'bar'", () => {
    const value = service.getQueryParam('foo');
    expect(value).toBe('bar');
  });
});

Python Mapping for Vue2 to Vue3

import os

# Mapping of Vue 2 syntax to Vue 3 syntax
migration_dict = {
    'data() {': 'setup() {\n    const state = reactive({\n',
    'methods: {': 'methods = {\n',
    'this.': 'state.',
    '};\n  },': '};\n\n    return { ...toRefs(state), ...methods };\n  }',
    'export default {': 'import { reactive, toRefs } from \'vue\';\n\nexport default {'
}

def migrate_vue2_to_vue3(file_path):
    with open(file_path, 'r', encoding='utf-8') as file:
        vue2_content = file.read()

    vue3_content = vue2_content
    for vue2_syntax, vue3_syntax in migration_dict.items():
        vue3_content = vue3_content.replace(vue2_syntax, vue3_syntax)

    vue3_content = f"<template>\n" + \
                   vue3_content.split('<template>')[1].split('</template>')[0] + \
                   f"\n</template>\n" + \
                   f"<script>\n" + \
                   vue3_content.split('<script>')[1].split('</script>')[0] + \
                   f"\n</script>\n" + \
                   f"<style scoped>" + \
                   vue3_content.split('<style scoped>')[1].split('</style>')[0] + \
                   f"</style>"

    output_file_path = os.path.join(os.path.dirname(file_path), 'Counter-vue3.vue')
    with open(output_file_path, 'w', encoding='utf-8') as file:
        file.write(vue3_content)

    print(f"Migrated component saved to: {output_file_path}")

# Usage Example
file_path = os.path.join(os.getcwd(), 'Counter.vue')
migrate_vue2_to_vue3(file_path)

Games

Add a custom sidebar

Clone this wiki locally