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')
    .postCss('resources/css/app.css', 'public/css', [
npm run dev

add to resources/js/app.js 

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: `
    ` }); app.mount("#app");

This will work for Single File Components 

import { createApp } from 'vue';
import App from './components/ExampleComponent.vue'

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);