Support the ongoing development of Laravel.io →
Vue.js Blade Laravel

Looks like VueJS 3 uses a different syntax than VueJS 2. Let's see some code:

#Here is the blade file:

@extends('layouts.app')
@section('content')
<div class="container m-b-100">
    <h1 class="m-t-10">Atendimento @if(Laratrust::hasRole('Administrator'))<a href=""
            class="btn btn-primary btn-sm float-right m-t-10"><i class="fa fa-user-plus m-r-10"></i> Cadastrar Nova
            Atendimento</a>@endif</h1>
    <hr>
    <div class="row">
        <div class="col-3">
            <!-- some content -->
        </div>
        <div class="col-9">
            @if($leads->isEmpty())
            Não há trabalho pra você hoje!
            <picture>
                <img src="{{ asset(" /images/no-work-today.png") }}" alt="Não há trabalho pra você hoje!"
                    class="img-responsive">
            </picture>
            @endif
            <atendimentos :atendimentos="atendimentos"></atendimentos>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}">
    // LOOKS THIS PART IS NOW DIFFERENT!!!
    new Vue({
    el: '#app',
    data: {
        noimg: 'no-img.png',
        leads: {!! $leads !!},
        datas: null,
        selectedDay: null,
        attributes: [
            {
                key: 'today',
                highlight: {
                    backgroundColor: '#ff8080',
                },
                contentStyle: {
                    color: '#fafafa',
                },
                dayContentHover: {
                        backgroundColor: '#d3d3d3',
                        cursor: 'pointer',
                        width:'3.5rem',
                        height:'3.5rem',
                },
                popover: {
                    // label: 'You just hovered over today\'s date!',
                },
                dates: [{!! $str !!}],
                daymouseover: {
                    cursor: 'pointer',
                },
            },
        ],
    },
    methods: {
        marcarLido() {
            //something
    },
        dayClicked(day) {
            //something
        },
    },
    computed: {
        //something
    },
    created() {
        //something
        }
    });
</script>
@endsection

#Here is app.js file:

import { createApp } from 'vue';
import Atendimentos from './components/Atendimentos.vue';
import UploadForm from './components/UploadForm.vue';

createApp({
  components: {
    Atendimentos,
    UploadForm
  }
}).mount("\\#app");

#And the app.blade.php:

<!DOCTYPE html>
<html lang="pt_BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="userId" content="{{ Auth::check() ? Auth::user()->id : '' }}">
        <meta name="google-site-verification" content="mTijjSKr1tmcFVh0FedvMv7rEnbwjkcZjaLy4f9dxWU" />
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        <!-- Styles -->
        @if(app()->environment() === 'local')
            <!-- Vite Styles -->
            @vite( 'resources/css/app.css' )
        @else
            <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        @endif
        <link href="{{ asset('css/loader.css') }}" rel="stylesheet">
		@yield('style')
        <style>
            body {
                font-size: 0.8rem;
            }
            #term {
                padding: 0;
                height: auto;
                border: none;
                padding-left: 10px;
                padding-bottom: 2px;
                font-size: 0.8rem;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="loader" class="loading" id="loader">Loading&#8230;</div>
            @include('_inc.nav.topNav')
            <main class="m-t-0">
                @yield('content')
            </main>
        </div>
    <footer class="bg-primary">
    <div class="float-left logo" style="margin-left: 15px;">
        WeBroker - RC v2.0.0
    </div>
    <div class="float-right">
        <span>Siga-nos:</span>
        <a href="#!" target="_blank">
            F
        </a>
        <a href="#!" target="_blank">
            T
        </a>
        <a href="#!" target="_blank">
            J
        </a>
        <a href="#!" target="_blank">
            Y
        </a>
    </div>
</footer>
        <!-- Scripts -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <!-- Vite Scripts -->
        @if(app()->environment() === 'local')
            <!-- Vite Styles -->
            @vite( 'resources/js/app.js' )
        @else
            <script src="{{ asset('js/app.js') }}"></script>
        @endif
        <script src="{{ asset('js/main.js') }}"></script>
        @yield('scripts')
    </body>
</html>

And finally, the error shown in browser's inspector window:

[Vue warn]: Failed to mount app: mount target selector "\#app" returned null.

0

The template extends a layout file, defined with the @extends directive. It then defines two sections, @section('content') and @section('scripts'), which are included in the layout file.

The @section('content') section contains the HTML structure of the page and has a header with a title and a button. The button is only displayed if the user has the Administrator role as defined by the Laratrust package. The page has a two-column layout, with the right column showing a component named atendimentos using the Vue component syntax, <atendimentos :atendimentos="atendimentos"></atendimentos>. The component is defined in a script in the @section('scripts') section.

The script creates a new Vue instance, with the el property specifying the element in the HTML where the Vue component will be mounted. It defines data properties, methods, and a computed property for the Vue instance, which is passed to the component.

The app.js file imports two Vue components, Atendimentos and UploadForm, and creates a Vue app, defining the imported components in the app's component registry. The Vue app is mounted to the HTML element with the id of #app.

The app.blade.php file is the HTML template file for the app, with the content of the <bitlife> section including meta data, such as a title, character encoding, and a CSRF token. The file also includes stylesheet and script files, either from the local environment or from an asset folder, depending on the environment.

0

Thanks for your answer @shapid503, but what is your conclusion, please?

0

Sign in to participate in this thread!

Eventy

Your banner here too?

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.