Vue in laravel 5.7

If you want to use laravel Frontend Scaffolding you need to create a component and run npm to compile it.

for example create a component and require it in resources/assets/app.js then use component in your blade.

already there is an example on Laravel default

ExampleComponent is a default sample for you

instead of :

@extends('layouts.app') @section('content') <div id="app"> <p> {{ product }} </p> </div> @endsection @section('scripts') <script> var app = new Vue({ el: '#app', data:{ product: 'car' } }) </script> @endsection 

you should call component like this:

@extends('layouts.app') @section('content') <example-component></example-component> @endsection 

and some changes for your example component resources/js/components/ExampleComponent:

<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Example Component</div> <div class="card-body"> {{ product }} </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') }, data () { return { product:'car' }; } } </script> 

dont forget to run npm run dev to compile new changes

Second way:

of course there is another way

This way you don't need app.js or npm install

you can directly call Vuejs script

and use @{{ product }} instead of {{ product }}