CODEWITHSUNDEEP
laravelvue.js
Saeed
Saeed

Reputation: 3520

Import vue js file to laravel

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:

tree file show

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: 2444

Answers (3)

AMINE SRIF
AMINE SRIF

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

Saif Rached
Saif Rached

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

Mohammed Aktaa
Mohammed Aktaa

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

Related Questions