2022-12-12
2301
#laravel#vue
Abiodun Solomon
145913
Dec 12, 2022 ⋅ 8 min read

Creating a single-page app with Laravel and Vue

Abiodun Solomon I’m a software developer that is curious about modern technologies. I love contributing to the growth of knowledge for the betterment of humanity.

Recent posts:

Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 ⋅ 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 ⋅ 6 min read
Build TypeScript App Vite

How to build a React + TypeScript app with Vite

We explore the benefits of building an app with React, TypeScript, and Vite, and compare its performance to the same app built with CRA.

Clara Ekekenta
May 28, 2025 ⋅ 7 min read

How to use Claude to build a web app

Learn how to build a weather app using Claude, from setting up infrastructure to creating a functional UI that displays city-based forecasts.

Andrew Evans
May 28, 2025 ⋅ 8 min read
View all posts

10 Replies to "Creating a single-page app with Laravel and Vue"

  1. where shoud this be placed?

    import {createRouter, createWebHistory} from ‘vue-router’;

    const router = createRouter({
    history: createWebHistory(),
    routes: [
    {
    path: ‘/’,
    component: () => import(‘./pages/Login.vue’)
    },
    {
    path: ‘/register’,
    component: () => import(‘./pages/Register.vue’)
    },
    {
    path: ‘/home’,
    component: () => import(‘./pages/Home.vue’)
    }
    ],
    })

  2. I would like to use this Tutorial with XAMPP instead of NGINX. But I dont now how to run ‘npm run dev’ and ‘php artisan serve’ at the same time. is there any config I have to change in XAMPP? Also I dont know where to put the App.vue file in Laravel structure.

    1. It should be in the parent directory, generated by Laravel,

      Here’s it
      “`
      import { defineConfig } from ‘vite’;
      import laravel from ‘laravel-vite-plugin’;
      import vue from ‘@vitejs/plugin-vue’

      export default defineConfig({
      plugins: [
      vue(),
      laravel({
      input: [‘resources/css/app.css’, ‘resources/js/app.js’],
      refresh: true,
      }),
      ],
      });
      “`
      Note: We can’t add all the code in the article 😉. But you can always refer to the source code here https://github.com/iamhabbeboy/laravel-vue-demo

Leave a Reply