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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 ⋅ 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 ⋅ 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 ⋅ 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 ⋅ 19 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