Laravel 11 + vue3

To integrate Vue 3 with Laravel 11, you can follow these steps to set up a development environment and understand how to manage routes and build for production. Here's a step-by-step guide:

Step 1: Set Up Laravel with Vue 3

1. Install Laravel: First, ensure you have Laravel installed. You can create a new Laravel project using Composer:

   composer create-project laravel/laravel my-laravel-app
   

2. Install Vue 3: Laravel Mix, which is included with Laravel, supports Vue 3 out of the box. First, navigate to your Laravel project directory:

   cd my-laravel-app
   

   Then, install Vue 3 and the necessary dependencies:

   npm install vue@next
   

3. Install Laravel Mix: If not already installed, you can install Laravel Mix:

   npm install laravel-mix
   

4. Configure Laravel Mix: Update your webpack.mix.js file to compile Vue 3. Here's a basic setup:

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .vue()
      .postCss('resources/css/app.css', 'public/css', [
          //
      ]);
   

5. Set Up Vue 3: Create a Vue component in resources/js/components/ExampleComponent.vue:

   <template>
       <div>
           <h1>Hello from Vue 3!</h1>
       </div>
   </template>
   
   <script>
   export default {
       name: 'ExampleComponent',
   }
   </script>
   

   Then, import and use this component in resources/js/app.js:

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

6. Compile Assets: Run the following command to compile your assets:

   npm run dev
   

Step 2: Manage Routes

• Laravel Routes: Laravel routes are used for server-side routing. You define them in the routes/web.php file. These routes handle requests and return views or data.

• Vue 3 Routes: If your application requires client-side routing, you can use Vue Router. Install it via npm:

  npm install vue-router@next
  

  Set up Vue Router in your app.js:

  import { createApp } from 'vue';
  import { createRouter, createWebHistory } from 'vue-router';
  import ExampleComponent from './components/ExampleComponent.vue';
  
  const routes = [
      { path: '/', component: ExampleComponent }
  ];
  
  const router = createRouter({
      history: createWebHistory(),
      routes,
  });
  
  const app = createApp({});
  app.use(router);
  app.mount('#app');
  

Step 3: Production Environment

1. Build for Production: When you're ready to deploy, run:

   npm run production
   

   This command will minify and optimize your assets for production.

2. Deploy to Linux Server:

   • Ensure your server has Node.js and npm installed.
   • Upload your Laravel project to the server.
   • Run composer install and npm install on the server.
   • Compile assets using npm run production.
   • Set up a web server (like Nginx or Apache) to serve your Laravel application.

Conclusion

By following these steps, you can successfully integrate Vue 3 with Laravel 11, manage both server-side and client-side routes, and prepare your application for production. As you gain more experience, you can explore more advanced topics like state management with Vuex or using Laravel Sanctum for authentication.