6 months ago

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


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

` app.js

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

import routes from './routes'

window.Vue = require('vue');

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

 [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:

(found in <Root>)

Please what am i doing wrong?

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