CODEWITHSUNDEEP
laravelvue.js
M R Behruz
M R Behruz

Reputation: 57

Vue in laravel 5.7

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

Upvotes: 0

Views: 267

Answers (1)

Mohammad Fanni
Mohammad Fanni

Reputation: 4173

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

Upvotes: 1

Related Questions