I'm totally a newbie in front end struggeling to wrap my head around it.
I have a question in Vue, for which I could't find answer anywhere: What does the 'vuetify' object here mean in the Vue constructor? I do know what veutify is, but why is it passed to the Vue constructor?
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
I have checked the Vue document https://012.vuejs.org/api/options.html
Every option has it's reserved name, like data, methods etc. But there are no definition of passing a 3rd party library or object to it.
Can anybody help me with this?
you can definitely pass custom or 3rd party options/library so you can use them in your Vue Application.
https://012.vuejs.org/api/instance-properties.html
Related
I have just completely upgraded my project to Vue2.7, which a backported support for Vue3 feature.
Like what I try is, get the object the in vue instance chain, such as
import Vue from 'vue'; Vue.prototype.$http = http; but no any method or hook such as createApp supported in vue2.7, so how to I access it(the $http) in my component?
only what I can do for now just console.log(getCurrentInstance()).
And finally get it by getCurrentInstance().proxy.__proto__.__proto__.$http, such unpleasant code, is it any other better shortcut to do this? Thanks.
I would suggest using provide/inject to make the axios available in all your components.
https://vuejs.org/guide/components/provide-inject.html
Find out the way by warmed-heart people Jacek, just use provide and inject to solve it.
Just like
const vue = new Vue({
setup() {
provide('http', http)
}, ...
}
Case and problem
I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
Trying to use FileUpload in my component:
<template>
<FileUpload name="demo[]" url="" #upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
What I tried so far
I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.
In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:
"primevue": "^3.7.0"
Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.
Thanks in advance!
Your usage of app.use() is incorrect:
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
app.use() takes only two arguments:
first argument: the Vue plugin
second argument: the plugin options
Also, PrimeIcons is not a plugin, so that should not be passed to app.use().
Solution
Pass each plugin individually to app.use():
app.use(router)
.use(PrimeVue)
//.use(PrimeIcons) // not a plugin
.use(store)
Dear friends of the modern lightweight web, I hope you can help a noobie regarding vue3 and Vuex 4.
I share timetable details (array of objects/dictionary) between multiple child components, which then can be displayed (e.g. Top 5 work) or edited (e.g. add new work details) in a way that these changes get reflected in all the other components. For this, I tried to use Vuex 4.
I am not able to access the state in a component. For debugging reasons, I even added a dummy entry during the creation of the state.
https://codesandbox.io/s/dazzling-brahmagupta-5sn1t?file=/src/main.js
Your demo uses Vuex 3 (perhaps that was a mistake only in the demo). Be sure to install Vuex 4, which provides the createStore() method:
npm i -S vuex#4
Also, the result of createStore() should be passed to app.use(), which is an instance method of the app from createApp() (not the App.vue component):
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'
const store = createStore(/*...*/)
// App.use(store) ❌ don't do this
createApp(App)
.use(store) ✅
.mount('#app')
demo
According to this blog post the correct way of including frequently used libraries (e.g. axios) in Vue.js 2 is to set them as property of Vue prototype object like this:
import axios from 'axios';
Object.defineProperty(Vue.prototype, '$axios', { value: axios });
Unfortunately, this approach is not working in Vue.js 3 anymore. So what is the correct way of importing library to be accesible in whole project? I would prefer not to set them as global variable (i.e. to the window object.)
To use provide/inject as an alternative
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
const app = createApp(App)
app.provide('axios', axios ) // <-- define here
app.mount('#app')
Then in any component you wanna use axios you would do this
app.component('todo-list-statistics', {
inject: ['axios'],
created() {
this.axios // --> Injected property
}
}
I think the best way to us a library in a vue 3 project is to use the depency injection
https://v3.vuejs.org/guide/component-provide-inject.html
however I simply recommend that you import the library where you really need it, to have a more accurate intellisense, and a better three-shaking
What is the difference between these two options when importing VueRouter?
import router from './router'
const app = new Vue({
el: '#app',
router,
});
vs
Vue.use(VueRouter);
I understand that Vue.use installs a plugin, is it necessary when passing it into my Vue instance constructor?
Your first example is passing a router definition object to the Vue instance. Your second example is registering the VueRouter plugin.
The VueRouter plugin needs to be registered to Vue via Vue.use(VueRouter) prior to passing the router object.
If you are confused why your first example works, even though you haven't registered VueRouter, I'd expect that Vue.use(VueRouter) is being called in the router.js file being imported.