mykelcodex
6 months ago
3858
8
Laravel

Use vue in laravel blade

Posted 6 months ago by mykelcodex

Hi guys,

I configured my laravel app as an spa using vuejs and vue router. How can i use vue in app.blade.php because i need to toogle my navbar on small screen. I have exhausted all options. Check below

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Text</title>
	<link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body class="font-sans">
      <div id="app">
          <div>
            <div v-show="message"></div>
         </div>
        </div>
        <router-view></router-view>
   </div>
    <script src="{{ asset('js/app.js') }}" async defer></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'You loaded this page on ' + new Date().toLocaleString()
        }
      })
    </script>
    </body>
</html>

` app.js

import Vue from 'vue';
import VueRouter from 'vue-router'

import routes from './routes'

window.Vue = require('vue');
Vue.use(VueRouter)

const app = new Vue({
    el: '#app',
    router: new VueRouter(routes)
});

i get this in my console.log

(index):21 Uncaught ReferenceError: Vue is not defined
    at (index):21
(anonymous) 

 [Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

Please what am i doing wrong?

Please sign in or create an account to participate in this conversation.