Example Frontend (example-frontend)

Example Quasar v2(Vue) SPA skeleton frontend to be used with a Laravel 8 project.

This project uses:

• ~~Quasar QEnv extension to customize API URI depending on your environment.~~ Removed in v2
• Vuex state to handle the user authentication
• For the local environment, it uses the webpack's proxy feature to proxy API calls(see here).

About releases

• The last Quasar v1 release can be downloaded here.
• The upgrade guide for existing installations can be found here.

Demo

Check out the live demo at http://frex.mpalade.ro

Use [email protected] and password test1234 to login.

How to use

Just clone this project into your desired new awesome project folder:

cd ~/Work
git clone [email protected]:training-yoyosan/example-frontend.git your-next-awesome-project

and follow the instructions below to set it up for local or production.

Then customize it to your heart's content.

Local setup

Install the dependencies

yarn

Start the app in development mode

quasar dev

Notes

• This setup is using a proxy configuration for the devServer definition in quasar.conf.js. Only needed for local development.
• Use [email protected] with password test1234 to login.

Almost there

Next set up the Laravel project(acting as an API) from here.

Now access the application at http://localhost:8080.

Deployment in production

Setup

# install dependencies
yarn

# setup env
cp .env.sample .env
vim .env
## Adjust API_BASE_URL

Build

quasar build

# Adjust your server configuration according to
# https://next.router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

# For Apache(optional)
cp .htaccess dist/spa

Deploy on your server.

Note: If you use HTTPS, use the protocol in your .env file.

Upgrade guide to v2

git pull
# remove packages related folders and files
rm -rf node_modules/ .quasar/ yarn.lock
# copy and update the .env file
cp .env.sample .env
# remove the old quasar env file
rm .quasar.env.json

yarn

quasar build

Find out more in the official upgrade guide.

Resources

• https://quasar.dev/introduction-to-quasar
• Quasar Discord #laravel channel
• For support, contact me at [email protected].