Vue JS component not working in blade page

user_18904063 0
Viewed 49

I want to load vue component in laravel blade file, but my changes are not reflected in laravel blade file. my vue file content is not loaded into blade file, example component return empty. There is no error in console, please help me to solve my problem.

  **Blade file**

<!DOCTYPE html>
<html>
<head>
<script defer src="{{ mix('js/example.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
</head>

<body>
<div id="app">
  
<example></example>
      
</div>

</body>
</html>

**

**example.js**

require('./bootstrap');
window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue').default);

const app = new Vue({
    el: '#app'
});
**

<!-- begin snippet: js hide: false console: true babel: false -->

Example.vue

<template>
   <div class="container">
       <h1>Example Code</h1>                    
   </div>
</template>
<script>
   export default {
}
</script>
laravel vue.js html javascript
1 Answers

Just change your js code like below way

require('./bootstrap');

import Vue from 'vue'

import Example from "./components/Example"

const app = new Vue({
   el: '#app',
   components: { Example },
});

Then you have to build the assets. Run below command

npm run dev
user_97709520
Related