How To Install Vue JS 3 In Laravel 9

Websolutionstuff | Oct-07-2022 | Categories : Laravel VueJs

In this article, we will see how to install Vue JS 3 in laravel 9. Laravel is a web application framework with expressive, elegant syntax.  Laravel is the best choice for building modern, full-stack web applications. You can web develop laravel with livewire, React JS, and Vue JS. So, we will laravel 9 installs with install Vue 3.

Vue JS is a javascript framework. It builds with HTML, CSS, and Javascript. Vue JS is a component based programming model that helps you efficiently develop a user interface. Vue js is an open-source JavaScript framework. Vue.js is a popular front-end framework for building Single Page Apps. Also, we can create a server-side web application using Vue JS.

In laravel's old version Vue was automatically installed when you install the new laravel. In laravel, you have to set it up manually. the laravel/ui package provides an easy way to set up Vue in your Laravel application. Also, make sure you have Node version >=12.14.

So, let's see, laravel 9 install Vue 3 or how to install Vue js in laravel 9.

Step 1: Install Laravel 9

Step 2: Install Vue 3

Step 3: Update Laravel Mix

Step 4: Create Vue 3 Component

Step 5: Import Vue to the app.js file

Step 6: Add Vue 3 Component to Laravel Blade File

Step 7: Run Application

 

Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

composer create-project --prefer-dist laravel/laravel laravel-9-vue3

 

 

Step 2: Install Vue 3

Now, we will install Vue 3 and its dependencies.

npm install --save vue@next && npm install --save-dev vue-loader@next

 

Step 3: Update Laravel Mix

In this step, we will open webpack.mix.js and add .vue() the method.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

 

Step 4: Create Vue 3 Component

Now, we will create a file named Test.vue in /resources/js/components folder and add the following code to this file.

<template>
    <h1>{{ title }}</h1>
</template>
<script>
export default {
    setup: () => ({
        title: 'How To Install Vue JS 3 in Laravel 9'
    })
}
</script>

 

 

Step 5: Import Vue to the app.js file

In this step, we will open resources/js/app.js and update the following code to the app.js file.

require('./bootstrap')

import { createApp } from 'vue'
import Test from './components/Test'

const app = createApp({})

app.component('testing', Test)

app.mount('#app')

 

Step 6: Add Vue 3 Component to Laravel Blade File

Now, we will add created component and also include the add.js file to the blade file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        <div id="app">
            <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
                <testing/>
            </div>
        </div>

        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

 

 

Step 7: Run Application

In this step, we will run the application using the following command

npm run watch
php artisan serve

.

You might also like:

Tags : Laravel VueJs Laravel 9
Recommended Post
Featured Post
How to Install Composer on Ubuntu 22.04
How to Install Composer on Ubu...

Hey there! If you're diving into the world of PHP development on your Ubuntu 22.04 machine, you'll likely come a...

Read More

Jan-10-2024

Laravel 10 Login and Registration with Auth
Laravel 10 Login and Registrat...

Welcome to my guide on creating a secure and visually appealing user authentication system in Laravel 10! Laravel, one o...

Read More

Aug-23-2023

How To Get Data Between Two Dates In Laravel 9
How To Get Data Between Two Da...

In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...

Read More

Dec-19-2022

Install and Use Trix Editor in Laravel 11
Install and Use Trix Editor in...

Hello, web developers! In this article, I will show you how to install and use Trix Editor in a Laravel 11 application,...

Read More

Aug-28-2024


Categories

Tools
Online Json Formatter
Online Password Generator
Online Character Counter
Online CSS Minifier
Online CSS Beautifier
Online Image Compressor New
EMI Calculator New
Online CSS To SCSS Converter New
Online CSS To SASS Converter New
Online CSS To LESS Converter New
Online Barcode Generator New

Popular Post
Laravel 8 Toastr Notifications Example
Laravel 9 User Role and Permission
How To Integrate Paypal Payment Gateway In Laravel
How to Send E-mail Using Queue in Laravel 7/8
Laravel 8 User Roles and Permissions Without Package
How To Create User Roles And Permissions In Laravel 10
Laravel 8 Form Class Not Found
How To Add Bootstrap Modal In Laravel
Laravel 8 User Role and Permission
How To Get Current Date And Time In Node.js