Why my web page is blank in laravel vue app?

Viewed 247

I have installed vue in laravel and then run command npm run watch with php artisan serve. But when loading the page nothing appears. Whats the problem ? There is no error.

main.js

import { createApp } from 'vue'
import store from './store'
import './index.css'
import App from './App.vue'

createApp(App).use(store).mount('#app')

App.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
export default{
  components:{
    HelloWorld,
  }
}
</script>

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

And also included .vue() in webpack.mix.js .

1 Answers

If you are using Laravel then you need to add your Vue component to to your app.js file

Vue.component('app-page', require('./components/App.vue').default);

Then from a blade file or layout file you can use your Vue component by calling it with

<app-page></app-page>

here is another way of doing it How to use vue.js component in laravel blade?

Related