Install Vue.js 3 on Laravel 10 Project: A Comprehensive Guide

Introduction

This tutorial will guide you through the process of installing Vue.js 3 in a Laravel 10 project. By integrating Vue.js with Laravel, you can leverage the strengths of both a robust PHP backend and a dynamic JavaScript frontend. Whether you're an experienced developer or a beginner, this step-by-step guide will help you set up your environment and create Vue components effectively.

Step 1: Create a New Laravel Project

• Open your terminal.
• Create a new Laravel 10 project by running:

  laravel new laravel-view
  

Step 2: Install NPM Dependencies

• Navigate into your newly created Laravel project:

  cd laravel-view
  

• Install the necessary NPM dependencies:

  npm install
  

Step 3: Install Vue.js

• Install Vue.js by running:

  npm install vue@next
  

Step 4: Configure Vite for Vue

• Open the vite.config.js file in your project.
• Import the Vue plugin:

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite/plugin';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: 'resources/js/app.js',
              refresh: true,
          }),
          vue(),
      ],
  });
  

Step 5: Set Up the Main JavaScript File

• Open resources/js/app.js.
• Import the createApp function from Vue:

  import { createApp } from 'vue';
  

• Create your Vue application:

  const app = createApp({});
  app.mount('#app');
  

Step 6: Modify the Blade Template

• Open resources/views/welcome.blade.php.
• Replace the existing HTML5 template with a div that has the ID app:

  <div id="app"></div>
  

• Ensure you include the compiled JavaScript file:

  <script src="{{ mix('js/app.js') }}"></script>
  

Step 7: Create a Vue Component

• Inside resources/js, create a new directory called components.
• Create a file named Example.vue inside the components directory:

  <template>
      <div>
          Example Component
      </div>
  </template>
  <script>
  export default {
      name: 'Example',
  }
  </script>
  

Step 8: Register the Component

• Modify your app.js file to register the component:

  import Example from './components/Example.vue';
  
  const app = createApp({});
  app.component('example', Example);
  app.mount('#app');
  

Step 9: Run the Development Server

• In your terminal, run the following command to start the development server:

  npm run dev
  

Conclusion

You have successfully integrated Vue.js 3 into your Laravel 10 project! You can now create and use Vue components within your Laravel views. To continue your learning, consider building more advanced components, exploring Vue Router for navigation, or integrating state management with Vuex. Don't forget to subscribe for more tutorials and keep experimenting with your new setup!