Develop Reference

Using Pinia store in component fails when app is run in dev server

I'm using Pinia for state management in a Vue 2 application, and when I start the dev server and visit localhost:8080 I get the following error:
[Vue warn]: Error in render: "TypeError: this.IssueStore is undefined"
found in
---> <ATable> at src/components/AlertTable/main.vue
<Inbox> at src/views/AlertInbox.vue
<MMApp> at src/components/App/main.vue
<App> at src/App.vue
<Root>
Followed by a console log:
🍍 "IssueStore" store installed
So it seems like the component is using the store before Pinia is ready. If I then make an update to a component within the project, which triggers the dev server to recompile, everything works as expected.
Here is the store - some code has been removed:
export const useIssueStore = defineStore('IssueStore', {
state: () => {
return {
issues: [],
};
},
getters: {
...
}
},
actions: {
...
}
});
Here is the component that throws the error:
<template>
<Table :columns="columns" :rows="getIssues" :selectable="true" />
</template>
<script>
import { useIssueStore } from '#/stores/IssueStore';
import { mapStores } from 'pinia'
import { Table } from '#/components';
export default {
name: 'ATable',
components: {
Table
},
data() {
return {
columns: [],
}
},
computed: {
...mapStores(useIssueStore),
getIssues() {
return this.IssueStore.filteredIssues;
}
},
}
</script>
This is main.js:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia, PiniaVuePlugin, setMapStoreSuffix } from "pinia";
import VueCompositionAPI from "#vue/composition-api";
Vue.config.productionTip = false;
Vue.use(PiniaVuePlugin);
const pinia = createPinia();
setMapStoreSuffix('');
Vue.use(VueCompositionAPI);
new Vue({
pinia,
router,
render: (h) => h(App),
}).$mount("#app");
Any thoughts on what may be causing this?

Can't create global vue variable ( Vue.prototype.$firebase )

I submit the form in login.vue which will call submit(). Then I'm getting below error in the web console.
Uncaught TypeError: Cannot read property 'auth' of undefined
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from 'firebase/app'
import { firebaseConfig } from '#/firebaseConfig';
Vue.prototype.$firebase = firebase.initializeApp(firebaseConfig)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
login.vue
const authService = {
methods: {
submit () {
this.$firebase.auth().signInWithEmailAndPassword(this.login.email, this.login.pass).then(
(user) =>{
this.$router.replace('bm')
}
)
}
}
}

You also have to:
import 'firebase/auth'
after the firebase/app import in order to get the Firebase Auth product functionality.

Laravel Vue.js component registration

I am creating a simple Vue.js application with Laravel. I have registered Vue.js with:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
If I create a custom component, this works just fine:
Vue.component('nav-section', {
template: `<div>This is odd</div>`
});
I can then call <nav-section></nav-section> in any given template, and it will output "This is odd."
However if I use Laravel's require method like so:
Vue.component('nav-section', require('./components/Navigation'));
It is not working anymore. <nav-section></nav-section> is empty, blank.
No errors in npm or console. Am I missing something, or some logic behind require?
Navigation.vue:
<template>
<div>
<span>Sample text</span>
</div>
</template>
<script>
export default {}
</script>
Vue.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
Vue.component('nav-section', require('./components/Navigation'));
const app = new Vue({
el: '#app',
components: {
App
},
router,
});

Try writing it out like this, with the extension and default:
Vue.component('nav-section', require('./components/Navigation.vue').default);

Store vuex Cannot read property 'store' of undefined"

I tried to create a first simple App but I have a problem with store.
I have in mainJS
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
Vue.use(Vuex);
import {store} from './Store.js';
store.commit('increment')
new Vue({
el: '#app',
router,
store,
template: '<div><App></App></div>',
components: { App }
});
So in my store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
So I would create a child component of App Component that use a event increment, so I have created a Component Counter
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$.store.state.count
}
}
}
</script>
And I call this component from my App component that it is:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Counter></Counter>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'app',
components:{
Counter
}
}
</script>
But I have this error in my Counter component:
[Vue warn]: Error in render: "TypeError: Cannot read property 'store'
of undefined"
found in
---> at src\components\Counter.vue
at src\App.vue

You only made a small mistake: It has to be $store, not $.store:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$store.state.count
}
}
}
</script>

I had the same problem and changing from Vue to vue and Vuex to vuex in all lines of .js store file I got it working.

Correct way to install custom VueJs Plugin

Im creating a custom plugin that encapsulates a bunch of authentication functionality with vuex and vue-authenticate.
The problem im having is figuring out the correct way to load and install the module into VueJS, im not sure if its my webpack or vuejs knowledge that is lacking but so far I have the following
/node_modules/plugin/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import routes from './routes'
import store from './vuex/store'
import EventBus from './bus/eventBus'
import config from './config'
import ping from './vuex/modules/apiArchitect/ping/store'
import auth from './vuex/modules/apiArchitect/auth/store'
import user from './vuex/modules/apiArchitect/user/store'
Vue.use(Vuex)
Vue.use(EventBus)
const store = new Vuex.Store({
modules: {
ping,
user,
auth
},
strict: true
})
let apiArchitect = {}
apiArchitect.install = function (Vue, options) {
Vue.prototype.$apiArchitect = store,
Vue.prototype.$apiArchitect.$config = config
Vue.prototype.$apiArchitect.$routes = routes
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(apiArchitect)
}
}
export default apiArchitect
/src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import apiArchitect from 'vue-apiarchitect'
import addRouteGuards from 'vue-apiarchitect/src/addRouteGuards'
Vue.config.productionTip = false
Vue.config.env = process.env.NODE_ENV
Vue.use(router)
Vue.use(apiArchitect)
console.log(apiArchitect)
addRouteGuards(router)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
So far I am able to import the plugin and run the install hook with Vue.use(apiArchitect) I can access this.$apiArchitect in my App.vue.
The problem I have is that the plugin provides some auth routes stored in $apiArchitect.routes these routes need to be merged with the routes provided by router. If I try access $apiArchitect.routes in main.js I get an 'undefined' error I can only access them after vue has been instantiated. If I actually try console.log apiArchitect in main.js all I see is an object containing an install function none of the plugin i've provided which makes me belive its not installing correctly.
Does anyone know how i can access the apiArchitect.$routes property in main.js or a better way of achieving this?
Thanks

You can add routes dynamically with router.addRoutes() since 2.2.x.
The argument must be an Array using the same route config format with
the routes constructor option.
For example, you can use addRoutes in created hook of the root component:
// your plugin
const myPlugin = {
install: function(Vue, options) {
Vue.prototype.$myPlugin = {
routes: [{
path: '/myplugin', component: options.myComponent
}]
}
}
}
// components
const testComponent = { template: '<p>Component called by plugin route</p>' }
const Home = { template: '<p>Default component</p>' }
// router
const router = new VueRouter({
routes: [{
path: '/', component: Home
}]
})
Vue.use(VueRouter)
Vue.use(myPlugin, { myComponent: testComponent })
new Vue({
el: '#app',
router,
created() {
this.$router.addRoutes(this.$myPlugin.routes); // dinamically add routes
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<button #click="$router.push('/')">Home</button>
<button #click="$router.push('/myplugin')">Custom</button>
<router-view></router-view>
</div>