[Vuejs]-Using prerender-spa-plugin with Laravel Vue.js in the resources directory

by

0👍

To use plugin in a component only: known as local registration

<script>
   import 'plugin_name' from 'plugin_directory'  //located at /node_modules

//to use it in component call it like shown below

export default{
  ...
}
</script>

Then use it according to its application

To use it in multiple components/views. Known as global registration

In app.js import component and register it

import Plugin from 'plugin_directory'

Vue.use(Plugin)

For example. to use axios, we import it and register it globally in app.js like this

import axios from 'axios'

Vue.use(axios)
//that's it

This is how we can register multiple plugins globally in Vue in app.js

require('./bootstrap');

import Vue from 'vue'
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);

import VueRouter from 'vue-router';
Vue.use(VueRouter);

Vue.config.productionTip =false;

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

import Notifications from 'vue-notification'
Vue.use(Notifications)

import VueHolder from 'vue-holderjs';
Vue.use(VueHolder)

import App from './layouts/App'


import router from './router'
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('autocomplete', require('./components/AutoComplete.vue')); 
Vue.component('topnav', require('./components/Nav.vue'));
Vue.component('imageupload', require('./components/ImageUpload.vue'));

const app = new Vue({
    el: '#app',
    router,
    template:'<App/>',
    components:{ App }
});

Leave a comment