issues working with vue 3, vite and single file componenets inside blade files

Hi all, im facing an issue with displaying vuejs single file componenets in a fresh laravel 10 app. maybe its a configuration error or something, but i cant seem to figure it out. The files are:

main.js
main.blade.php
index.blade.php
HomePageView.vue

main.blade.php is the layout and index.blade.php extends it.

main file:

<!doctype html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@yield('title')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        @yield('content')
    </div>
</body>
</html>

index file:

@extends('layouts.main')

@section('title', 'Homepage')
@section('content')
    <HomePageView></HomePageView>
@endsection

main.js file:

import './bootstrap';

import { createApp } from 'vue';

import HomepageView from './components/HomepageView.vue';

const app = createApp(HomepageView);

app.component('home-page-view', () => import('./components/HomepageView.vue'))

app.mount('#app');

vite config file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,

                },
            },
        }),
    ],
});

if ill go to the register page for example, ill see the form for a second and then it will display the homepage. i have no idea why, first time this happes to me.

what am i missing here? if any other code is needed to better understand the issue, please tell me and i will update my question. Thanks.

LaryAI

2 years ago

Level 58

Based on the information provided, it seems like you are trying to use a Vue 3 Single File Component (SFC) within a Laravel Blade file. There are a few things that need to be addressed to ensure that your Vue component is properly integrated and rendered within your Laravel application.

First, let's correct the main.js file. You are trying to create an app instance with HomepageView and then you are trying to register it as a global component. This is not necessary if HomepageView is your root component. Here's how you should structure your main.js:

import { createApp } from 'vue';
import HomepageView from './components/HomepageView.vue';

const app = createApp({});

app.component('HomePageView', HomepageView);

app.mount('#app');

In the main.js file, we create a new Vue application and register HomePageView as a global component. This allows us to use the <HomePageView> tag directly in our Blade templates.

Next, ensure that your index.blade.php file is correctly referencing the component. The tag name should match the one you registered in main.js. Since Vue component names are case-sensitive, make sure they are consistent:

@extends('layouts.main')

@section('title', 'Homepage')

@section('content')
    <HomePageView></HomePageView>
@endsection

Make sure that your HomePageView.vue component is correctly formatted as a Vue 3 SFC:

<template>
  <!-- Your component HTML goes here -->
</template>

<script>
export default {
  name: 'HomePageView',
  // Your component logic goes here
};
</script>

<style>
/* Your component CSS goes here */
</style>

Lastly, ensure that your vite.config.js file is correctly set up to handle Vue files and that the laravel-vite-plugin is correctly configured to refresh the page when changes are made:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});

After making these changes, run npm run dev or npm run build to compile your assets with Vite. If you're in development mode, Vite will provide a development server with hot module replacement.

If you've followed these steps and are still facing issues, please provide more details about the error messages or behavior you're encountering.

RuinSain

2 years ago

Best Answer

Level 14

I have reached the solution. i needed to reference my vue components in blade file with kebab-case. solved it like a charm.

Please or to participate in this conversation.