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
– Saeed, Commented Oct 22, 2019 at 11:07
@JinalSomaiya Yes i added that package and the warning solved but the blank page not resolved. — Saeed
– Saeed, Commented Oct 22, 2019 at 11:12
@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
– Saeed, Commented Oct 22, 2019 at 11:26

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

2

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>

answered Oct 22, 2019 at 13:01

Mohammed Aktaa

1,35310 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saif Rached · Accepted Answer · 2022-01-14 17:03:19Z

0

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>

answered Jan 14, 2022 at 17:03

Saif Rached

12 bronze badges

Comments

AMINE SRIF · Accepted Answer · 2023-04-17 18:57:07Z

0

I had some problem , try to use vue-router version 3 using :

npm install vue-router@3

that is working fine with me

answered Apr 17, 2023 at 18:57

AMINE SRIF

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Import vue js file to laravel

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related