PHP Laravel | Vue.js | Vite Application.

If you are interested in creating a laravel app with a front end javascript library like React or Vuejs, these notes I am sharing will show you how to start a Laravel Project with Vue.JS.


My Development Environment:

  1. Windows 10 PC with VirualBox 5 (host)
  2. Linux Ubuntu 20 TLS
  3. PHP 8.2.0
  4. Composer version 2.0.9
  5. Docker version 20.10.2
  6. Laravel 9
  7. Visual Code

List of Linux Terminal Commands in Chronological order:

  1. $ curl -s "https://laravel.build/example-app" | bash
  2. $ cd example-app
  3. $ touch MyNotes.txt; code MyNotes.txt
  4. $ sail up
  5. $ sail composer require laravel/jetstream
  6. $ sail artisan jetstream:install inertia
  7. $ sail artisan migrate
  8. $ npm run dev
  9. open http://localhost/

Lets create a New Project called example-app

$ curl -s "https://laravel.build/example-app" | bash
$ cd example-app

Create a file for you to keep notes:

$ touch MyNotes.txt; code MyNotes.txt

Start the laravel app with sail
NOTE: I am using sail as the alias for ./vendor/sail
$ sail up

I GOT AN ERROR: Creating example-app_mysql_1       ... error
SOLUTION - Kill all the docker containers: docker stop $(docker ps -a -q)

$ sail up
Open this url with your browser: http://localhost/
Install JetStream
$ sail composer require laravel/jetstream
Install Inertia
$ sail artisan jetstream:install inertia
RESULT: INFO  Inertia scaffolding installed successfully.

Run the data base migrations:
$ sail artisan migrate
REFRESH BROWSER TO: http://localhost/
* YOU WILL NOTICE LOGIN AND REGISTER LINKS

CREATE AN ACCOUNT at http://localhost/register
name: John Doe
email: [email protected]
password: pass321!
TAKE A LOOK AT JETSTREAM Page, looks nice right!
Notice the PROFILE MANAGEMENT: http://localhost/user/profile
You can allow pictures in the user profiles. ENABLE PROFILE PICTURES:
open: jetstream.php
$ code config/jetstream.php
REMOVE COMMENT FROM:

// Features::profilePhotos(),

REFRESH Browser to see the new upload picture feature: http://localhost/user/profile
Start the front-end server
$ npm run dev
OUTPUT:

  VITE v4.0.3  ready in 1592 ms
  âžœ  Local:   http://localhost:5174/
  âžœ  Network: use --host to expose
  âžœ  press h to show help
  LARAVEL v9.45.1  plugin v0.7.3
  âžœ  APP_URL: http://localhost

STOP SERVER AND NOW RUN IT ON SAIL:
$ sail npm run dev

OUTPUT:
 VITE v4.0.3  ready in 686 ms
  âžœ  Local:   http://localhost:5173/
  âžœ  Network: http://172.22.0.7:5173/
  âžœ  press h to show help
  LARAVEL v9.45.1  plugin v0.7.3
  âžœ  APP_URL: http://localhost


Lets see the Vue application in action, open Dashboard.vue
$ code resources/js/Pages/Dashboard.vue
REPLACE: <Welcome />
WITH: <h1 class="text-xl font-bold p-4">Hello World</h1>
REFRESH: http://localhost/

Done:

Resources:

  • Subresource Integrity (SRI)
    https://laravel.com/docs/9.x/vite#subresource-integrity-sri
  • https://youtu.be/FvS5cw-dLs0 - Unlimited power with Laravel and Vite! - Jess Archer - ViteConf 2022
  • https://vapor.laravel.com/
  • https://bootcamp.laravel.com/
    create a new or react app tutorial