CODEWITHSUNDEEP
vuejs3
thefuzzy0ne
thefuzzy0ne

Reputation: 481

Passing data to createApp (vue)

Using Webpack, I have this code:

import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'

createApp(App).mount('#search-app')

On my website, I have a page for the search app that contains the <div id="search-app" /> to mount the root of the application to.

What I would like to know is, whether it's possible to somehow insert (preferably) some of the data from the page that includes the javascript file? There are a few things items I would like to include from the database, such as settings and search categories, and I'd like to avoid making an AJAX request for them if it can be helped.

Can it be helped or is there some way I can include this data inline at load time?

With Webpack, I don't quite understand how I can get access to App from the page that loads the javascript file, so that I can modify data before somehow passing it in to createApp(), or if it's even possible. Can I use import statements on a page that's loaded by the browser, or is this stictly a Webpack only (or similar) feature?

Many thanks in advance.

Upvotes: 7

Views: 8786

Answers (1)

Daniel
Daniel

Reputation: 35684

You can use createApp's second parameter to pass props.

import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
    
createApp(App, {myProp: "value"}).mount('#search-app')

docs

Upvotes: 10

Related Questions