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

Vue component not rendering in Laravel Blade

I have a Vue Component, that is simple like this:

<template>
    <h1>Teste</h1>
</template>

<script>
export default {
    mounted() {
        console.log("Component mounted.");
    },
};
</script>

my app.js:

require("./bootstrap");

import { createApp } from "vue";

import ExampleComponent from "./components/ExampleComponent";

const app = createApp({});

app.component("ExampleComponent", ExampleComponent);
app.mount("#app");

and when i try to use this component in blade the component is not rendering, i try this way

  <div>
        <h1> <ExampleComponent></ExampleComponent> </h1>
  </div>

and this way

 <div>
        <h1> <ExampleComponent/> </h1>
 </div>

the blade is working fine, its just the Vue component that is not rendering

Tags:

2

Answers


  1. 0

    Please check if you install Vue properly in Laravel project,
    double check it and also check if JS files are loading

    Login or Signup to reply.
  2. 0

    you need to add id app
    ex:

    <div id="app">
<h1> <ExampleComponent/> </h1>
</div>

    or

    <div id="app">
    <h1> <ExampleComponent></ExampleComponent> </h1>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search