Vue in laravel 5.7

Question

I want to use vue in my laravel project it does not working i installed npm install which was vue and vue-template also installed. this is my index.blade.php.

@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

this is my package.json file.

  "devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "2.6.4",
"vue-template-compiler": "2.6.4"
}

Did you check your console errors? check source of the page it seems you have two div#app and you should setup Vue configs from resources/assets/app.js — Mohammad Fanni
– Mohammad Fanni, Commented Feb 16, 2019 at 15:13
On "resources/assets/app.js " the exampleComponent is cofigured by default. — M R Behruz
– M R Behruz, Commented Feb 16, 2019 at 15:55
In console " Failed to load resource: the server respond with a status of 500 (internal server Error) " also on the web page it says that product is undefined. Thanks. — M R Behruz
– M R Behruz, Commented Feb 16, 2019 at 16:10

Mohammad Fanni · Accepted Answer · 2019-02-16 17:58:57Z

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 }}

Thanks for your answers. But this way I coded was a video coding same as me I don't know what was he cofigured or did before. Or no he didn't
{{ product }} is laravel syntax Did you test @{{ product }} ?

Collectives™ on Stack Overflow

Vue in laravel 5.7

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related