Create a new Vue.js application (version 2.0.0rc7) with specified attributes

Question

Create a new Vue.js application (version 2.0.0rc7) with specified attributes

My Vue.js application (version 2.0.0rc7) is structured using single page components, with the main component being named App. In order to render my app within a div identified by app, I have created a script named main.js:

import Vue from 'vue'
import App from './App.vue'

var vm = new Vue({
  el: '#app',
  render: h => h(App)
})

The current setup is functioning effectively with webpack handling imports. However, I am interested in making my application easily integratable for other developers to use as a drop-in solution on their websites. So, I am exploring ways to pass properties to the main App component.

For instance, I envision allowing developers to load my pre-built app through HTML script tags and then initialize it like so:

App(dataObj1, dataObj2, ..., '#id-of-div-element-to-mount')

javascript vue.js

Answer 1

Answer №1

After much experimentation, I devised a clever fix for my issue: I crafted an init function that accepts the required data as input and then proceeds to display the application on an HTML element. The beauty lies in making this init function accessible in the global space:

var initialize = function (data, element) {
  const appViewModel = new Vue({
    el: element,
    template: '<app :data="data"/>',
    components: {
      App
    },
    data () {
      return {
        data: data
      }
    }
  })
}

// retrieve existing namespace object, or generate an empty object if not found
var APP = window.APP || {}
APP = {
  init: initialize
}
window.APP = APP

This setup enables others to effortlessly integrate my constructed application with their own data into their HTML pages using APP.init(data, '#some-el-id').

To ensure smooth operation, it is essential for Vue to be compiled in standalone mode, necessitating the addition of the following line to the webpack configuration:

// ...
resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},
// ...

Detailed instructions can be found here: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

Answer 2

After much experimentation, I devised a clever fix for my issue: I crafted an init function that accepts the required data as input and then proceeds to display the application on an HTML element. The beauty lies in making this init function accessible in the global space:

var initialize = function (data, element) {
  const appViewModel = new Vue({
    el: element,
    template: '<app :data="data"/>',
    components: {
      App
    },
    data () {
      return {
        data: data
      }
    }
  })
}

// retrieve existing namespace object, or generate an empty object if not found
var APP = window.APP || {}
APP = {
  init: initialize
}
window.APP = APP

This setup enables others to effortlessly integrate my constructed application with their own data into their HTML pages using APP.init(data, '#some-el-id').

To ensure smooth operation, it is essential for Vue to be compiled in standalone mode, necessitating the addition of the following line to the webpack configuration:

// ...
resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},
// ...

Detailed instructions can be found here: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

Create a new Vue.js application (version 2.0.0rc7) with specified attributes

Answer №1

Similar questions

Restricting href Usage Based on Session

Securely Connecting to an MQTT Broker with a JavaScript Client (React) while Safeguarding Credentials

How do I incorporate scrolling into Material-UI Tabs?

Is there a way to verify if the JSON Object array includes the specified value in an array?

NextJS: encountered an error with fallback enabled

Connect a series of numerical input fields in Vue.js

Generating Dynamic Image Sources with Vue 3 using Rollup

Having trouble loading and viewing large PDF files using XMLHttpRequest

Leveraging the For loop in the MongoDB Aggregation pipeline

Display a <div> every hour

Validation for duplicate usernames or emails in the sign-up action of a REST API

Verify if two items possess identical property values

A guide on verifying a username and password via URL using JavaScript

Steps to hide a div with jQuery when a user clicks outside of a link or the div itself:1. Create a click event

Using external directive to validate Access Form

Clarification on the order and frequency of AJAX XHR request onReadyStateChange events

How come my Calendar is not showing up on the browser?

What is the best way to retrieve the index of a specific clicked value within a table?

Manage both React keyboard and mouse events within a single function

Unlocking the contents of an array from a separate file in Next.js