You can nudge your life in a new direction every day.

Vue 3 in Laravel 8

Submitted by admin on Sat, 03/27/2021 - 13:42

 

$ composer create-project  --prefer-dist  laravel/laravel . -vvv
npm install

npm install vue@next


Call Vue from Laravel Mix, so that webpack.mix.js 


mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
npm run dev

add to resources/js/app.js 

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

run from the command line.

npm run dev

Now Vue will be compiled by Laravel Mix in to your public /js/app.js

Rendering a component

The minimal Vue 3 component in Laravel might look like this in resources/js/app.js:

 

import { createApp } from 'vue'; const app = createApp({
    data() {
        return {
            message: "Hello World"
        }
    }, template: `
    <div>
    <h1>{{message}}</h1>
    </div>
    ` }); app.mount("#app");

This will work for Single File Components 


import { createApp } from 'vue';
import App from './components/ExampleComponent.vue'
createApp(App).mount("#app")

However I like to organize it this way to help me see my Vue Single File Components:

 

import { createApp } from 'vue';

const app = createApp({
    /* options */
})
app.component('example-component', require('./components/ExampleComponent.vue').default);
app.mount("#app");