Como renderizar um componente Vue 3 no blade Laravel 9?

Programação
, , ,
#1

Sou novo em Vue.js, eu tentei tudo o que posso pensar, mas apesar de não ter erros de compilação, não consigo carregar componentes Vue em meu projeto. Não entendo o pq, mas apenas recebo uma página em branco ao tentar visualizar a página com o serviço Laravel.

ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

app.js

import './bootstrap';
import { createApp } from 'vue';



const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);



app.mount('#app');

welcome.blade.php

<example-component></example-component>

obs, estou usando laravel ui

#2

O meu app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{{asset('build/assets/app.525f5899.css')}}">
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
    <script src="{{asset('build/assets/app.872ffc4c.js')}}"></script>
</body>
</html>

e na página que eu vou abrir e o controller TestController são:

<?php
namespace App\Http\Controllers;
class TestController extends Controller
{
    public function index()
    {
        return view('test');
    }
}

@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection

Sendo que a instalação seguindo esse link: laravel/ui - Packagist com os seguintes passos a passos:
1 - Depois da instalação do Laravel
2 - composer require laravel/ui
3 - php artisan ui vue
4 - npm install
5 - npm run build

onde o número 5 gera na pasta /public/build/assets/ *.css e *.js que são colocados na página da seguinte forma:

<link rel="stylesheet" href="{{asset('build/assets/app.525f5899.css')}}">

e

<script src="{{asset('build/assets/app.872ffc4c.js')}}"></script>

e por isso vai funcionar assim:

componente

#3

Boa tarde, tudo bom? Muito obrigado pela sua ajuda, funcionou aqui, o que eu estava fazendo antes, era ao invés de usar o npm run build, executava o npm run dev, saberia me dizer a diferença? e se eu quiser registrar outro componente no app.js por exemplo

import './bootstrap';
import { createApp } from 'vue';



const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);



app.mount('#app');

é so seguir o mesmo passo e gerar um codigo novo com o npm run build?

1 curtida
#4

Dá uma lida:

Basicamente npm run dev é para rodar e o npm run build é para criar o arquivo final