I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use() statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex#next as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store} but what you really want to do is export the Store instance created by createStore().
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})
Related
I'm trying to add vue-phone-number-input on my project. I have installed the package with npm install vue-phone-number-input.
Here is my main.js :
// Code ....
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
const app = createApp(App)
.use(IonicVue)
.use(router)
.use(VueCordova)
.use(Camera)
app.component("master-layout", MasterLayout)
app.use(store);
app.component('vue-phone-number-input', VuePhoneNumberInput);
router.isReady().then(() => {
app.mount('#app');
});
And I've imported this line on my template :
<vue-phone-number-input v-model="yourValue" />
But nothing's happening. I have an error :
vue-phone-number-input.common.js?ea25:7355 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (vue-phone-number-input.common.js?ea25:7355:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:890:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5598:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5712:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5726:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5508:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5466:1)
at patch (runtime-core.esm-bundler.js?d2dd:5068:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5252:1)
What's wrong? When I use native Vue, I've never had any problems importing modules. But with Ionic, I've never been able to.
Thank you.
That plugin only works with vue2 : https://github.com/LouisMazel/vue-phone-number-input/issues/159. Ionic uses vue3, you need to use the other plugin he provides.
I'm struggling to understand how to use functions in Vue 3 from 3rd party JavaScript libraries. I am trying to use the interactive fiction library inkjs in my Vue 3 project. I installed it using: npm install inkjs. I am using the composition API. However, I cannot access the functions in inkjs. Specifically, this does not work:
import { ref } from '#vue/reactivity'
import getStory from '../ink/story.js'
import { inkjs } from 'inkjs'
export default {
name: 'HomeView',
setup() {
const { storyContent } = getStory()
const story = new inkjs.Story(storyContent.value)
return { displayText, story }
}
}
Story is the main function in the inkjs library.
It gives this console error:
HomeView.vue?43d0:29 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Story')
at setup (HomeView.vue?43d0:29:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7160:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7114:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5655:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
I am using Vuex and using store.js for the first time. In my main.js file I am using
import { store } from './store/store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
and everytime I run this I keep getting this error.
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vue' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 1:0-23
# ./src/main.js
# multi main
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vuex' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 2:0-25
# ./src/main.js
# multi main
I have tried scouring the internet and have found several peopole saying that this is a dependency issue and I have checked for updates and with no luck have found an answer. Below is my store.js file in my store folder.
import Vue from '.vue';
import Vuex from '.vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0
}
})
If anyone could help me understand what is happening and how to correct this. Here is the repo all you have to do is clone and npm install.
https://github.com/brianmsantos/Vuex
Your problem is with the imports of Vue packages. You have to remove the dot prefix from them, like so:
import Vue from 'vue';
import Vuex from 'vuex';
Those packages come from node_modules, thus don't need to be prefixed by .
I'm trying to integrate a Datatable plugin (https://www.npmjs.com/package/vuejs-datatable) in my Vue application and I'm getting an error in my console.
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (vuejs-datatable.js?b015:1)
at Object.eval (vuejs-datatable.js?b015:1)
at eval (vuejs-datatable.js:4)
at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
My dataTable.vue file:
<template lang="html">
<section class="data-table">
<datatable :columns="columns" :data="rows"></datatable>
</section>
</template>
<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>
And whenever i try to use 'Vue.use(PluginName)' when integrating a plugin, i get the similar error. I'm new to VueJS. Is there anything i need to do ?
You need to add plugin before your main Vue instance is initialized; See using vue plugins here, which says:
Use plugins by calling the Vue.use() global method. This has to be
done before you start your app by calling new Vue().
For your case, move
import Vue from 'vue'
Vue.use(DatatableFactory)
to your main.js, so it looks like:
import Vue from 'vue'
Vue.use(DatatableFactory)
// some other code
new Vue({
...
})
Adding the following in weback.config.js seemed to do the trick:
module.exports = {
resolve: {
alias: {
...
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
...
}
},
}
Based on discussion here:
https://github.com/pstephan1187/vue-datatable/issues/50
I faced the same error in my vue-app.
import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....
Vue.use(VueRouter);
...
The error was cannot read property 'use' of undefined. Which means, it had a problem with reading Vue. I checked my package.json and package-lock.json (for whether I installed in my local). Everything seemed ok. I had both Vue and Vue-router.
Deleting node_modules and re-installing worked for me.
My vue code calls element-ui modules:
// in main.js
import { Notification } from "element-ui";
At first, my test was throwing
Cannot find module 'Element' from 'test.js'
so I mocked the module with
jest.mock('element-ui', () => ({
Element: jest.fn(),
}))
However it still errors out with
Cannot find module 'element-ui/lib/theme-default/element.css' from 'test.js'
and I don't know how to get passed this.
Any ideas ? Thanks.
If I import the element-ui components in my test.js:
ReferenceError: document is not defined
at Object.<anonymous> (node_modules/element-ui/lib/utils/dom.js:22:39)
at Object.<anonymous> (node_modules/element-ui/lib/utils/popup/popup-manager.js:9:12)
at Object.<anonymous> (node_modules/element-ui/lib/utils/popup/index.js:14:21)
(Jest 21.2, vue-test-utils 1.0.0)
What I did was to register all Element-UI components before every test file.
jest.config.js (https://jestjs.io/docs/en/configuration#setupfiles-array)
module.exports = {
...,
setupFiles: ['./jest/eachTest.js'],
...
}
eachTest.js
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, {})
This helped: https://github.com/eddyerburgh/vue-hackernews/
I now import all element-ui related components in the main.js, and I mock every method that calls one of its components:
beforeEach(() => {
// Mock this method that calls a Notification element-ui component.
vm.notifyWarning = jest.fn();
})