How To Install Vue 3 in Laravel 8 From Scratch (ok)

https://techvblogs.com/blog/how-to-install-vue3-laravel

C:\xampp\htdocs\marinesTeam26\resources\js\app.js

require('./bootstrap')
import { createApp } from 'vue'
import Welcome from './components/Welcome'
const app = createApp({})
app.component('welcome', Welcome)
app.mount('#app')

C:\xampp\htdocs\marinesTeam26\resources\js\Welcome.vue

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

C:\xampp\htdocs\marinesTeam26\resources\views\welcome.blade.php

<!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>
       

        <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">
                <welcome />
            </div>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

C:\xampp\htdocs\marinesTeam26\package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.0",
        "vue-template-compiler": "^2.6.12"
    }
}
j
Previous==== END Học Vue JS 2 cơ bản - RHP Team ===Next_.template, UnderscoreJS Templates Full (ok)

Last updated