All geek questions in one place

Configuring VueJS in Laravel

I installed VueJS2 for use 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 is the content that 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 mt-lg"> <h1>MEDIFAKTOR server</h1> </div> <div id="app"> <h1>{{message}}</h1> </div> </div> </div> </div> @endsection

When I update, I get an error message:

Error Exception on line 80e040fb5fff0b0cf766194784388a0cd255e6c9.php 10: Using the message undefined constant - received message (View: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)

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

Did I put it in the wrong places?

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" } }
+5
source share
4 answers

Try using @ {{message}} instead of {{message}} in your index blade. because your message is not a php variable of the JS framework variable. place the @ sign in front of the variable.

+3
source

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

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

You may also encounter a problem when your JS code starts executing before loading vue.min.js, try using the onload event for the 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 the 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 }) } });
+1
source

If you are having trouble displaying vuejs curly braces {{}}. @ {{}} should do the trick or make things easier you can review @verbatim html code {{vuejs_vars}} @endverbatim

verbatim tags in the blade make sure that between them it is not possible to analyze the blade engine and print it as is.

0
source

Vue is declared in assets /bootstrap.js. So check there. If it is in place, it may debug the created hook in the Vue instance:

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

Try debugging from there.

0
source

Source: https://habr.com/ru/post/1261468/

More articles:


All Articles