Develop Reference

how can i make library with Vue.js (Feat. store, router)

first, i'm sorry that my English is not good.
...
I want to make vue.js components module.
I tried simple button component module and It works(it include vuex).
I saw this page.
and I want to make some module with 5 components that use both store and vue-router.
so I tried like this.
import LoadingSpinner from './components/common/LodingSpinner.vue';
import Modal from './components/common/Modal.vue';
import InputPage from './components/InputPage.vue';
import Page from './components/Page.vue';
import ProcessingPage from './components/ProcessingPage.vue';
import store from './store/index.js';
import route from './routes/index.js';
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error('Please initialise plugin with a Vuex store.')
}
options.store.registerModule('dummylib', store);
options.route.registerModule('dummylib', route);
Vue.component('loading-spinner', LoadingSpinner);
Vue.component('modal', Modal);
Vue.component('input-page', InputPage);
Vue.component('page', Page);
Vue.component('processing-page', ProcessingPage);
}
when i finished it and install in new project, I can't see even App.vue and all components are missing.
Here is the main.js of the new project that will include the module.
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import DummyButton from 'dummylib';
import router from './routes';
import InputPage from 'dummylib';
import Page from 'dummylib';
import ProcessingPage from 'dummylib';
import Modal from 'dummylib';
import LoadingSpinner from 'dummylib';
Vue.config.productionTip = false
Vue.use(DummyButton, {store});
Vue.use(InputPage, { store });
Vue.use(Page, { store });
Vue.use(ProcessingPage, { store });
Vue.use(Modal, { store });
Vue.use(LoadingSpinner);
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
how can i solve this problems...
thank you for watching my question with not good english.
i hope you understand my intension.

11:5 error 'router' is assigned a value but never used no-unused-vars

I am trying to make an object from ROUTER class in JAVASCRIPT file and this error happens
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
Vue.config.devtools = false;
import Router from 'vue-router'
Vue.use(Router);
var router = new Router();
new Vue({
render: h => h(App),
}).$mount('#app')

You made a router instance but never used it with Vue.
You must link both together by doing:
var router = new Router();
new Vue({
router, // here we link the router instance to the Vue instance
render: h => h(App),
}).$mount('#app')
As said here: https://router.vuejs.org/guide/#javascript
There error you see is because you created/declared a variable but never used it.

Setting up Vuetify in Rails?

I'm running Vue 2.6.10 and Vuetify 2.2.12 within my Rails application, but I'm having issues with getting Vuetify installed properly.
I'm getting the following errors:
[Vuetify] Multiple instances of Vue detected
Error: "Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object"
[Vue warn]: Error in render: "TypeError: this.$vuetify is undefined"
Here is my dashboard.js file:
import Vuex from 'vuex'
import Dashboard from '../../assist/dashboard.vue'
import VueResource from 'vue-resource'
import TurbolinksAdapter from 'vue-turbolinks'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuex)
Vue.use(TurbolinksAdapter)
Vue.use(VueResource)
Vue.use(Vuetify)
window.store = new Vuex.Store({
state: {
organization: {},
},
mutations: {
}
})
document.addEventListener("turbolinks:load", function() {
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
var element = document.querySelector("#assistdashboard")
if (element != undefined) {
const app = new Vue({
el: element,
store: window.store,
template: "<Dashboard />",
components: { Dashboard }
})
}
})
And my layout.vue file:
<template>
<v-app id="dashboard-layout">
...
</v-app>
</template>
I've tried adding vuewtify: new Vuetify(vuetifyOptions) within my Vue initialization in dashboard.js but that has not changed anything. I've also tried reinstalling both Vue and Vuetify to no avail as well.
Anyone have any ideas?

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);

Unable to use store.subscribe() method in Vuex

I'm simply trying to use the store.subscribe() method in Vuex. I keep getting the following error, which seems to suggest that there is no store.subscribe method, contrary to what is in the docs:
Uncaught TypeError: WEBPACK_IMPORTED_MODULE_2__store.a.state.subscribe is not a function
this is my code:
app.js file, where I initialise everything, register my components etc:
import Vuex from 'vuex';
import router from './routes';
import store from './store';
window.Vue = require('vue');
const app = new Vue({
el: '#app',
router,
store: new Vuex.Store(store)
});
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})
my store.js file, which serves as my centralized Vuex store. It's been working perfectly until now:
import router from './routes';
export default {
state: {
sample: {
}
},
mutations: {
sample(state){
}
},
getters: {
sample(state){
return state.sample
}
}
}
how do i correct this issue

I think this happens because store is still just a regular object and not an instance of Vuex yet when you call it.
Can you try the following:
import Vuex from 'vuex';
import router from './routes';
import store from './store';
window.Vue = require('vue');
const myStore = new Vuex.Store(store)
const app = new Vue({
el: '#app',
router,
store: myStore
});
myStore.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})

Add app object like app.store... because your store is not known as Vuex store instance at that level.
import Vuex from 'vuex';
import router from './routes';
import store from './store';
window.Vue = require('vue');
const app = new Vue({
el: '#app',
router,
store: new Vuex.Store(store)
});
app.$store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})