Implementing initial laravel-8.6.12 setup with vue3 using mixing -

Category: Vue Topic: Mixin Created: 3 years ago

Mixin has been used previously instead of vite as asset bundling tool. In previous post we have shown the initial setup with vite. In this post we will be using mixin to setup inital laravel vue project smoothly.

Step 01: Installing fresh laravel with specific version of 8.6.12

composer create-project laravel/laravel vue3 "8.6.*"

Step 02: Frontend bundling

npm install && npm run dev

Step 03: Renaming welcome.blade.php to app.blade.php and putting following html

 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue initial setuptitle>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    head>
    <body>
    <div class="app-body">
        <main class="main">
            <div style="padding-top: 20px" class="container">
                <h1>This is h1 header h1>
            div>
        main>
    div>
    body>
html>

Step 04: Renaming welcome to app in routes/web.php

Route::get('/', function () {
    return view('app');
});

Step 05: Back in app.blade.php changing div inside main tag like below by putting id element "app"

 <div style="padding-top: 20px" class="container" id="app">
	
div>

Step 06: Installing Vue and Vue-loader

npm install vue@3
npm install vue-loader

Step 07: Adding vue() method in webpack.mix.js which comes default in laravel to process vue files in asset bundling

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

Step 08: Setting up vue component in resources/js/components/SimpleStatic.vue and using following html

<template>    
    <h1>Simple static text from vue component h1>
template>

Step 09: Adding app.js inside head section using defer

 <html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue initial setup title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="{{ asset('js/app.js') }}" defer>script>
    head>
    <body>
    <div class="app-body">
        <main class="main" >
            <div style="padding-top: 20px" class="container" id="app">
                <h1>This is h1 header h1>
            div>
        main>
    div>
body>
html>

Step 10: creating root component in resources/js/components/App.vue

 <template>
    <SimpleStatic />
template>

<script setup>
import SimpleStatic from "./SimpleStatic.vue"
script>

Step 11: Joining all together by creating a Vue application in the resources/js/app.js

import './bootstrap';

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

Step 12: Starting mixing

npm run watch

Step 13: Running the site in browser with the following command

php artisan serve

This will show the text in browser - "Simple static text from vue component".

Lastly please note, you may get this error in browser console - [Vue warn]: Failed to mount app: mount target selector returned null. Then please be sure to check your app.js is loaded with mix just before end of body section or added in head section of the browser using defer.

Last Edited: 3 years ago