CODEWITHSUNDEEP
laravelgulpvue.js
sesc360
sesc360

Reputation: 3255

VueJS Setup in Laravel

I installed VueJS2 for usage in laravel. Starting with a simple test setup, this is app.blade.php

<!DOCTYPE html>
<html>
<head>
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MEDIFAKTOR - @yield('title') </title>
    <link rel="stylesheet" href="css/vendor.css" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>

  <!-- Wrapper-->
    <div id="wrapper">
        <!-- Navigation -->
        @include('layouts.navigation')
        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Page wrapper -->
            @include('layouts.topnavbar')
            <!-- Main view  -->
            @yield('content')
            <!-- Footer -->
            @include('layouts.footer')
        </div>
        <!-- End page wrapper-->
    </div>
    <!-- End wrapper-->
<script src="js/app.js" type="text/javascript"></script>
  <script>
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
  </script>
  @section('scripts')
@show
</body>
</html>

and this the content I want to display

index.blade.php

@extends('layouts.app')
@section('title', 'Main page')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center m-t-lg">
                            <h1>MEDIFAKTOR server</h1>
                        </div>
                        <div id="app">
                            <h1>{{message}}</h1>
                        </div>
                    </div>
                </div>
            </div>
@endsection

When I refresh, I get the error:

ErrorException in 80e040fb5fff0b0cf766194784388a0cd255e6c9.php line 10: Use of undefined constant message - assumed 'message' (View: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)

This sounds to me, like VueJS is not recognized. I installed according to VueJS website and laracasts.com

Did I place it a the wrong spots?

Package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0"
  }
}

Upvotes: 6

Views: 481

Answers (4)

Alexander Reznikov
Alexander Reznikov

Reputation: 1268

If you solved the problem with sign @, but still get an error "Vue is not defined", as you said in the comment, you have a typo in your code - you should use attribute src, not scr. So the correct including of the vue.min.js should looks like that:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

Also you can get a problem when your JS code is starting to execute before vue.min.js is loaded, try to use onload event for vue JS file:

<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script type="text/javascript">
function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
}
</script>

Or you can use importScript function from this: https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement

// definition of the function importScript ...

// call function importScript with two parameters - script URL and onload handler function
importScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){
    function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
    }
});

Upvotes: 1

LC Yoong
LC Yoong

Reputation: 1842

Vue is declared in assets/bootstrap.js. So, check there. If it's in place, perhaps debug at the created hook on the Vue instance:

created: function () {
console.log('instance created')
}

Try to debug from there.

Upvotes: 0

A H Bensiali
A H Bensiali

Reputation: 875

If you're having problems getting to render vuejs' curly braces {{}}. @{{}} should do the trick or to make things simpler you may consider blade's @verbatim html code {{vuejs_vars}} @endverbatim

verbatim tags in blade make sure that any between them doesnt get parsed by the blade engine & are printed as is.

Upvotes: 0

BetaDev
BetaDev

Reputation: 4684

Try to use @{{message}} instead of {{message}} in your index blade. because your message is not php variable its JS framework variable. put @ sign before the variable.

Upvotes: 3

Related Questions