Install Laravel sail & Vuejs 3.0 on MAC (M1)

 Laravel is a web application framework with expressive, elegant syntax. It strives to provide an amazing developer experience while providing powerful features such as thorough dependency injection, an expressive database abstraction layer, queues and scheduled jobs, unit and integration testing, and more.

Vue JS allows the Laravel developers to create the front end in a way that the application does not have to reload the page every time an update is made. It will help improve the application's performance and make it easy to manage and optimize.

Laravel provides Sail, a built-in solution for running the Laravel project using Docker.

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker configuration. Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Setting up laravel and Vuejs on MAC M1 :

1. Install Laravel sail.

   curl -s "https://laravel.build/laravelapp" | bash

    

   

    

2. Found error while doing sails up on MAC M1

   cd laravelapp && ./vendor/bin/sail up -d

    

   

    

3. As the given MySQL image does not support “linux/arm64/v8”, used another image “mysql/mysql-server:8.0” from the docker hub which supports “ARM”.

   cd laravelapp && ./vendor/bin/sail up -d

    

   

    

   

    

Install Node and Vue MAC M1 :

1. Install “macOS installer” from https://nodejs.org/en/download/

2. Install view

   npm install vue@next

    

   

3. Install CLI

   npm install -g @vue/cli

   
   Found error :

   

   
   Install CLI with sudo

   sudo npm install -g @vue/cli

    

   

   
   ”node_modules” with all dependencies libraries should be installed.

   

    

4. Update Vue

   vue upgrade --next

    

5. Check the Vue version

   vue -V

    

   

    

Create Vue project using “Vite”
Vite is a web development build tool that allows for lightning-fast serving of code due to its native ES Module import approach.
Vue projects can quickly be set up with Vite by running the following commands in the terminal.

1. Create a project “vue3app” using npm

   npm init @vitejs/app vue3app

    

2. Choose a template “vue” from the given options and enter to add the project:

   

    

   
   

   
   Now run:
    

   cd vue3app npm install npm run

    

   

   
   Run :

   npm run dev

   
   Now the server is up to run the application.

   

   
   Browse the URLs to see the application running successfully.

   Local: http://localhost:3000/ Network: http://192.168.29.9:3000/ Network: http://192.168.64.1:3000/

    

   

3. Updated Component file to include the logo and alter the message to see the changes.