rizqisamawa / setup-laravel-vue

how to setup vuejs in laravel

How to setup VueJS in Laravel

Command Prompt

npm i vue@next vue-router@next

npm i -D @vue/compiler-sfc vue-loader@next

npm i -D @vue/compiler-sfc vue-loader@next

npm install autoprefixer@10.4.5 --save-exact

composer require laravel/ui ( optional )

php artisan ui bootstrap ( optional )

Change your file in webpack.mix.js

mix.js("resources/js/app.js", "public/js")
    .vue()
    .sass("resources/sass/app.scss", "public/css")
    .sourceMaps();

npm install && npm run dev

Setup VueJS in laravel

• Open folder resources/js/
• Make folder pages and router

Create file in folder pages HomeView.vue

<template>
    <div>
        <h1>This is Home View</h1>
    </div>
</template>

Create file in router pages index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {
        path: "/home",
        name: "home",
        component: () => import("../pages/HomeView.vue"),
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

Create file App.vue

<template>
    <nav>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view />
</template>

Change file app.js

import "./bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
import axios from "axios";
import router from "./router";

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount("#app");

php artisan serve