Question 168997 in Laravel Question posted in
The official Laravel Documentation can be found here.

Which is better: Laravel, Vite, or Vue Blade?

I have installed laravel + vite + vue. If I use this code and ‘npm run dev’ , i allways see only vue component. Not render blade (I can’t see the text in this case). What’s wrong?

index.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>Laravel 9 with vue 3 vite</title>

</head>

<body>
    <div id="app">
        <calendar-component></calendar-component>
        <p>Sample text</p>
    </div>
    @vite('resources/js/app.js')
</body>

</html>

app.js


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

import CalendarComponent from "./components/CalendarComponent.vue";

createApp(CalendarComponent).mount("#app");

app.js – new

    import "./bootstrap";
     import { createApp } from "vue";
     import CalendarComponent from "./components/CalendarComponent.vue";
                     
 const app = createApp({
            components: {
                CalendarComponent,
            },
        });
        
        app.mount("#app");
Tags:

2

Answers


  1. 0

    By calling .mount("#app") you will mount the vue application instance in your <div id="app"></div> element.

    Assuming your CalendarComponent has a template this will "replace any existing DOM nodes inside the container" (See docs).

    If you want to mix vue and blade you could change your index.blade.html body to something like this:

    <div id="blade">
    <p>Sample text</p>
</div>
<div id="app"></div>
@vite('resources/js/app.js')
    Login or Signup to reply.
  2. 0

    Solve it for Vue 3.

    In the vite.config.js need add a alias for vue:

    export default defineConfig({
    ....
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search