Reputation: 3520
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?
Upvotes: 0
Views: 2443
Reputation: 1
I had some problem , try to use vue-router version 3 using :
npm install vue-router@3
that is working fine with me
Upvotes: 0
Reputation: 1
use src="{{ mix('js/app.js') }}"
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}" />
<title>VueJS CRUD Operations in Laravel</title>
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Upvotes: 0
Reputation: 1353
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>
Upvotes: 2