Import vue js file to laravel

Question

I used these vue js files to build my form in Larval.

When I call these files in Larval I get a blank page.

The structure of my files is as follows:

And the contents of app.js file is as follow:

import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
Vue.config.productionTip = false;
new Vue({
    store,
    render: h => h(App)
}).$mount("#app");

Of course, I get the below warning when I run nmp run watch's command.

WARNING in ./resources/js/app.js 5:8-19 "export 'default' (imported as 'VeeValidate') was not found in 'vee-validate' @ multi ./resources/js/app.js ./resources/sass/app.scss

My question is: How to import external vue js files to laravel project?

I solved the warning using of import * as VeeValidate from 'vee-validate'; — Saeed
@JinalSomaiya Yes i added that package and the warning solved but the blank page not resolved. — Saeed
@JinalSomaiya I copy the vue js files from the git and put them in the resource folder and called in the app.js. Is this right? — Saeed

Mohammed Aktaa Mohammed Aktaa · Accepted Answer · 2019-10-22T13:01:29

First thing you need to include app.js to your blade file like this

<script src="{{asset('js/app.js')}}"></script>

after that if you want to use vue js components in you blade app you need to define them in your app.js like this:

Vue.component('home', require('path to your component').default);

and in your blade under div #idd add your tag <home></home>

Import vue js file to laravel

1 Answers