How to load a vuejs build into another vuejs?

Updated: Feb 16, 2025

How to load a vuejs build into another vuejs?

To load a Vue.js build into another Vue.js application, you need to properly configure the new application to include the built Vue.js library as a dependency. Here's a step-by-step guide on how to do it:

  1. Install the new Vue.js application: If you haven't created the new Vue.js application yet, you can use Vue CLI to create a new project. Run the following command in your terminal:

    vue create my-new-project
    

    Follow the prompts to configure the project.

  2. Install the built Vue.js library as a dependency: You can download the built Vue.js library from the official website (https://vuejs.org/v2/guide/installation.html#Runtime-only) or use a CDN link. In this example, we'll use the CDN link.

    Open the package.json file of your new project and add the following line under the "dependencies" object:

    "vue": "^2.x.x"
    

    Replace ^2.x.x with the version number of the built Vue.js library you downloaded.

    Then, add the following line under the "scripts" object:

    "install-vue": "cd node_modules/vue && npm install"
    

    Save the file and run the following command to install the new dependency:

    npm run install-vue
    
  3. Configure the new application to use the built Vue.js library: Open the main.js file of your new project and replace the content with the following code:

    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      el: '#app'
    })
    
    // Add this line to import the built Vue.js library
    import 'vue'
    

    Save the file.

  4. Load the built Vue.js library: Open the index.html file of your new project and add the following line just before the closing </body> tag:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    

    Replace the CDN link with the path to the built Vue.js library if you downloaded it locally.

  5. Build the new application: Run the following command to build the new application:

    npm run build
    

Now, you have successfully loaded a Vue.js build into another Vue.js application. The new application will use the built Vue.js library instead of the one included in the Vue CLI.