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:

Recommended Post
Featured Post
Google Autocomplete Address In Laravel 9
Google Autocomplete Address In...

In this article, we will see the google autocomplete address in laravel 9. In laravel 8 google autocomplete address...

Read More

Apr-12-2022

How To Store JSON Data In Database Laravel 9
How To Store JSON Data In Data...

In this article, we will see how to store JSON data in the database laravel 9. Laravel 9 stores JSON data in M...

Read More

Sep-28-2022

Routing - Laravel 7/8 Routing Example
Routing - Laravel 7/8 Routing...

In this article, we will give you information about the basic route, named route, and advanced route in laravel 7 and la...

Read More

Nov-01-2020

Laravel 10 Multiple Image Upload Example
Laravel 10 Multiple Image Uplo...

In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple i...

Read More

Mar-17-2023