I am using vue 2.6.14 and composition-api 1.3.3 package to use composition api. I have
my main.js like
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I try to setup a store
I have a src folder / store folder / index.js
and inside the index.js
import { reactive } from '#vue/composition-api'
const state = reactive({
counter : 0
})
export default{ state }
inside App.vue I try to import store to use it
<script>
import store from '#/store'
</script>
I get the error Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
I tried all solutions from here and nothing works. If I remove the import store from '#/store' the error goes away. Using vue 3 s not an option.
How can I solve this?
Thanks
imports are automatically hoisted to the top of the file, so it actually precedes the Vue.use(VueCompositionApi) at runtime.
So these lines:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue' 👈 hoisted
...become:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
import App from './App.vue' 👈
Vue.use(VueCompositionAPI)
So the plugin doesn't get installed before App.vue gets imported, leading to the error you observed.
Option 1: Move plugin installation to own file
You can move the installation of #vue/composition-api into its own file that could be imported before App.vue:
// lib/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
// main.js
import Vue from 'vue'
import './lib/composition-api'
import App from 'App.vue'
demo 1
Option 2: Use require() in App.vue
require the store in the component's setup(), where the #vue/composition-api would've already been installed:
// App.vue
import { defineComponent, computed } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = require('#/store').default
return {
counter: computed(() => store.state.counter),
increment: () => store.state.counter++,
}
},
})
demo 2
Option 3: Use import() in App.vue
Dynamically import the store with import(). This is especially needed in Vite, which does not have require().
// App.vue
import { defineComponent, computed, ref } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = ref()
import('#/store').then(mod => store.value = mod.default)
return {
counter: computed(() => store.value?.state.counter),
increment: () => store.value && store.value.state.counter++,
}
},
})
demo 3
Related
I am developing an application in Express and Vue js
I'm getting this:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=1667997788986:1:9)
App.vue file :
import {Vue, createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(axios, vueAxios)
createApp(App).mount('#app')
My main.js file is :
<script>
export default {
data(){
return{
dataResponse: [],
}
},
methods: {
async getDataResponse(){
const res = await axios.get(`${this.baseUrl}/catalog/home`)
console.log(response)
}
},
created(){
this.getDataResponse()
}
}
</script>
<template>
<h1>Welcome</h1>
</template>
You didn't write which version of Vue you are using, but based on the fact that you are using createApp it looks like you are using Vue 3.
In that case, the error is correct -- there is no export called Vue in the module vue. Vue 3 removed the default export, so you can't write import Vue from 'vue' anymore, and there is no export named Vue in the package, so import { Vue } from 'vue' is not valid either.
You're probably trying to follow an old tutorial about installing Vue plugins. In Vue 3, instead of writing Vue.use(plugin), you would write createApp().use(plugin) instead.
If your are using Vue 2.7 and 3.x, do you mind if try import { createApp } from 'vue', and then use createApp(App).use(axios).use(vueAxios).mount('#app')? It should be works because of import nature.
Another alternative:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
const app = createApp(App)
app.use(axios)
app.use(vueAxios)
app.mount('#app')
Using the latest version of Vue
I've been trying to make Vuelidate work
Every guide I see on the internet using this type of "Main.js" code:
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import App from './app/App';
Vue.use(Vuelidate);
new Vue({
el: '#app',
render: h => h(App)
});
While my main.js looks like this:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Trying to use in my component as followed:
import { required, email } from '#vuelidate/validators'
import {useVuelidate} from "#vuelidate/core";
export default {
data: () => ({
v$: useVuelidate(),
Trying to implement it like this:
<div v-if="submitted && !$v.validations.affiliate.required"></div>
Getting this error:
unable to resolve type of v$
import { createApp } from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
createApp(App).use(Vuelidate).mount('#app')
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
Putting a console.log() into the created() & mounted() methods of my App.vue component, the App is created & mounted twice on every page refresh.
I've been driving myself crazy trying to find the reason for this, I've stripped my App right to the bones and it's still happening
This is my App.vue:
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
mounted() {
console.log('mounted');
},
created() {
console.log('created');
}
}
</script>
And this is my main.js:
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
import { store } from './store'
import router from './router'
import App from './App.vue'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'
Vue.use(Vuetify)
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.config.productionTip = false
axios.defaults.baseURL = process.env.API_URL;
new Vue({
el: '#app',
render: h => h(App)
});
Found the issue: My webpack config was pointing to same file twice
My webpack config was pointing to same file twice
I'm creating a counter using Vue & Vuex 2.
When trying to access the count property on the store object, using this.$store.state.count, I get an Cannot read property 'state' of undefined error.
The error doesn't show up and everything works just fine when I'm creating the store instance inside main.js, instead of importing it.
main.js
import Vue from 'vue'
import Vuex from 'Vuex'
import App from './App.vue'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
store.js
import Vue from 'Vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
}
});
Counter.vue
export default {
name: 'counter',
template: `<span>{{ count }}</span>`,
computed: {
count () {
return this.$store.state.count
}
},
}
Any idea what's wrong with the store import?
You have imported vue differently:
import Vue from 'Vue'
within store.js and
import Vue from 'vue'
within main.js
change your store.js import to match main.js to fix the issue, i.e.
import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
}
});
you can also remove the Vuex import in main.js