Skip to content

Framework Migration

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

Resources

Freelancing

Decoupling a component from Nuxt to Vue for JSFiddle

# Step 1: Extract the Vue Component
component:
  file: MyComponent.vue
  content: |
    <template>
      <div>
        <label for="wiki-select">Choose an article:</label>
        <select id="wiki-select" v-model="selectedOption">
          <option v-for="option in options" :key="option" :value="option">{{ option }}</option>
        </select>
        <p>Selected option: {{ selectedOption }}</p>
      </div>
    </template>

    <script>
    export default {
      props: {
        options: {
          type: Array,
          required: true
        },
        selectedOption: {
          type: String,
          default: null
        }
      },
      methods: {
        foo(selectedOption) {
          console.log('Selected option changed:', selectedOption);
        }
      }
    };
    </script>

# Step 2: Extract the Vuex Store
store:
  file: store.js
  content: |
    import Vue from 'vue';
    import Vuex from 'vuex';
    import axios from 'axios';

    Vue.use(Vuex);

    export default new Vuex.Store({
      state: {
        options: [],
        selectedOption: null
      },
      mutations: {
        setOptions(state, options) {
          state.options = options;
        },
        setSelectedOption(state, option) {
          state.selectedOption = option;
        }
      },
      actions: {
        fetchOptions({ commit }) {
          const script = document.createElement('script');
          const callbackName = 'foo';
          
          window[callbackName] = (response) => {
            commit('setOptions', response.query.search.map(item => item.title));
          };

          const url = `https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=vue&origin=*&callback=${callbackName}`;
          script.src = url;
          document.body.appendChild(script);
          script.onload = () => {
            document.body.removeChild(script);
            delete window[callbackName];
          };
          script.onerror = (error) => {
            console.error('Error fetching options:', error);
            document.body.removeChild(script);
            delete window[callbackName];
          };
        }
      }
    });

# Step 3: Create the Main Entry File
main:
  file: main.js
  content: |
    import Vue from 'vue';
    import App from './MyComponent.vue';
    import store from './store';

    new Vue({
      store,
      render: h => h(App)
    }).$mount('#app');

# Step 4: Create an HTML File
html:
  file: index.html
  content: |
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Standalone Vue Component with Vuex</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <script src="./main.js" defer></script>
    </head>
    <body>
      <div id="app"></div>
    </body>
    </html>

# Summary
summary: |
  By following these steps, you can decouple a Vue component with a Vuex store from a Nuxt.js project and package it for use in a GitHub Gist. This process involves extracting the component and store, creating a main entry file, and setting up an HTML file to load the application.

Vue2 to Vue3

lifecycle_methods:
  mounting:
    vue2: 'mounted'
    vue3: 'onMounted'
  updating:
    vue2: 'updated'
    vue3: 'onUpdated'
  unmounting:
    vue2: 'beforeDestroy'
    vue3: 'onBeforeUnmount'
  before_mount:
    vue2: 'beforeMount'
    vue3: 'onBeforeMount'
  before_update:
    vue2: 'beforeUpdate'
    vue3: 'onBeforeUpdate'
  destroy:
    vue2: 'destroyed'
    vue3: 'onUnmounted'

Vuex to Pinia

lifecycle_methods:
  store_initialization:
    vuex: 'store'
    pinia: 'createPinia'
  state_definition:
    vuex: 'state'
    pinia: 'state'
  getters:
    vuex: 'getters'
    pinia: 'getters'
  actions:
    vuex: 'actions'
    pinia: 'actions'
  mutations:
    vuex: 'mutations'
    pinia: 'no direct equivalent (use actions or composition API)'
  modules:
    vuex: 'modules'
    pinia: 'no direct equivalent (use multiple stores)'
  plugins:
    vuex: 'plugins'
    pinia: 'plugins'
  state_access:
    vuex: 'this.$store.state'
    pinia: 'useStore().$state'
  commit:
    vuex: 'this.$store.commit'
    pinia: 'useStore().$patch'
  dispatch:
    vuex: 'this.$store.dispatch'
    pinia: 'useStore().$patch or direct action call'
  strict_mode:
    vuex: 'strict'
    pinia: 'no direct equivalent (use devtools or custom logic)'
  hot_module_replacement:
    vuex: 'store.hotUpdate'
    pinia: 'not needed (store is reactive by default)'

Vue2

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue with Vuex and Axios</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <dropdown-component></dropdown-component>
  </div>

  <script>
    // Vuex Store
    const store = new Vuex.Store({
      state: {
        options: [],
        selectedOption: null
      },
      mutations: {
        setOptions(state, options) {
          state.options = options;
        },
        setSelectedOption(state, option) {
          state.selectedOption = option;
        }
      },
      actions: {
        fetchOptions({ commit }) {
          const script = document.createElement('script');
          const callbackName = 'foo';
          
          // Define the callback function
          window[callbackName] = function(response) {
            const options = response.query.search.map(item => item.title);
            commit('setOptions', options);
          };

          // Set the JSONP URL
          const url = `https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=vue&origin=*&callback=${callbackName}`;
          
          // Set the script element's src to the JSONP URL
          script.src = url;
          
          // Append the script to the document
          document.body.appendChild(script);

          // Clean up the script and callback after execution
          script.onload = () => {
            document.body.removeChild(script);
            delete window[callbackName];
          };
          script.onerror = (error) => {
            console.error('Error fetching options:', error);
            document.body.removeChild(script);
            delete window[callbackName];
          };
        }
      }
    });

    // Vue Component
    Vue.component('dropdown-component', {
      template: `
        <div>
          <label for="wiki-select">Choose an article:</label>
          <select id="wiki-select" v-model="selectedOption" ref="selectDropdown">
            <option v-for="option in options" :key="option" :value="option">{{ option }}</option>
          </select>
          <p>Selected option: {{ selectedOption }}</p>
        </div>
      `,
      computed: {
        ...Vuex.mapState(['options', 'selectedOption']),
      },
      methods: {
        ...Vuex.mapMutations(['setSelectedOption']),
        foo(selectedOption) {
          console.log('Selected option changed:', selectedOption);
        }
      },
      mounted() {
        this.$store.dispatch('fetchOptions');
        this.$refs.selectDropdown.addEventListener('change', (event) => {
          this.foo(event.target.value);
        });
      },
      beforeDestroy() {
        this.$refs.selectDropdown.removeEventListener('change', this.foo);
      }
    });

    // Vue Instance
    new Vue({
      el: '#app',
      store
    });
  </script>
</body>
</html>

Vue3

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue 3 with Pinia and Axios</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <dropdown-component></dropdown-component>
  </div>

  <script>
    const { createApp, ref, onMounted, defineComponent } = Vue;
    const { createPinia, defineStore } = Pinia;

    // Define the Pinia store
    const useStore = defineStore('main', {
      state: () => ({
        options: [],
        selectedOption: null
      }),
      actions: {
        fetchOptions() {
          const script = document.createElement('script');
          const callbackName = 'foo';
          
          // Define the callback function
          window[callbackName] = (response) => {
            this.options = response.query.search.map(item => item.title);
          };

          // Set the JSONP URL
          const url = `https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=vue&origin=*&callback=${callbackName}`;
          
          // Set the script element's src to the JSONP URL
          script.src = url;
          
          // Append the script to the document
          document.body.appendChild(script);

          // Clean up the script and callback after execution
          script.onload = () => {
            document.body.removeChild(script);
            delete window[callbackName];
          };
          script.onerror = (error) => {
            console.error('Error fetching options:', error);
            document.body.removeChild(script);
            delete window[callbackName];
          };
        }
      }
    });

    // Define the Vue component
    const DropdownComponent = defineComponent({
      template: `
        <div>
          <label for="wiki-select">Choose an article:</label>
          <select id="wiki-select" v-model="selectedOption" ref="selectDropdown">
            <option v-for="option in options" :key="option" :value="option">{{ option }}</option>
          </select>
          <p>Selected option: {{ selectedOption }}</p>
        </div>
      `,
      setup() {
        const store = useStore();
        const selectDropdown = ref(null);

        // Define the foo method
        const foo = (selectedOption) => {
          console.log('Selected option changed:', selectedOption);
        };

        onMounted(() => {
          store.fetchOptions();
          selectDropdown.value.addEventListener('change', (event) => {
            foo(event.target.value);
          });
        });

        return {
          options: store.options,
          selectedOption: store.$state.selectedOption,
          selectDropdown
        };
      }
    });

    // Create the Vue app and Pinia store
    const app = createApp({
      components: {
        DropdownComponent
      }
    });

    const pinia = createPinia();
    app.use(pinia);
    app.mount('#app');
  </script>
</body>
</html>

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)

Test Util and elements

Component

// components/SelectComponent.vue
<template>
  <div>
    <label for="country">Choose a country:</label>
    <select id="country" v-model="selectedCountry">
      <option value="US">United States</option>
      <option value="CA">Canada</option>
      <option value="MX">Mexico</option>
    </select>
    <p>Selected country: {{ selectedCountry }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCountry: 'US',
    };
  },
};
</script>

<style scoped>
select {
  margin-top: 10px;
}
</style>

Test File

// tests/unit/SelectComponent.spec.js
import { mount } from '@vue/test-utils';
import SelectComponent from '@/components/SelectComponent.vue';

describe('SelectComponent', () => {
  test('selects a country', async () => {
    const wrapper = mount(SelectComponent);

    // Find the select element
    const select = wrapper.find('select');

    // Simulate changing the select value
    await select.setValue('CA');

    // Assert the selected country is updated
    expect(wrapper.vm.selectedCountry).toBe('CA');
    expect(wrapper.find('p').text()).toBe('Selected country: CA');
  });
});

Games

Add a custom sidebar

Clone this wiki locally