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);
Related
is this the right way to include a vue component?
new Vue({
render: (h) => h(App)
})
.component("v-select", vSelect)
.$mount("#app");
I tried to use vue-select but seeing a blank screen https://codesandbox.io/s/affectionate-goodall-judt9?file=/src/main.js:164-254
To register vue component, use this way
import Vue from "vue";
import App from "./App.vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
Vue.config.productionTip = false;
//Here register v-select component
Vue.component("v-select", vSelect);
new Vue({
render: (h) => h(App)
}).$mount("#app");
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.
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?
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)
})
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>