Skip to content

This is a template for laravel and vue 3 Vite using sanctum

Notifications You must be signed in to change notification settings

BroJenuel-Templates/vue-3-laravel-sanctum

Repository files navigation

INTRO

Hi! I am Jenuel Ganawed, I made this template so that If i have new projects in the future. It will Be easy to Setup a Project. I make my own templates, for easy project setup and ready auth for user login and logout.

You can check more in my Project Template Repo in https://github.com/bro-jenuel-project-templates

For This Project This are the tools/things That I included.

  • vue 3
    • This is the frontend.
  • naive-ui
    • This is for component. I choose this because it is really great component libraries. It has a lot of components available and is being supported.
  • WindiCSS
    • I chose this over tailwind because I feel like WindiCSS is a lot faster and has more features than tailwind css
  • sass/scss
    • i like using scss or sass, its is more easier and faster when styling.
  • Prettier
    • for this one, this does not need to be installed. I like using it because I can customize my way of coding. Enabling prettier in VS Code really makes the code nicer and more readable.

Recommendation:

  • I Recommend that you use yarn, I believe its a lot better than npm.
  • User only this template when creating admin dashboards like CRM etc. Because this setup is for single page application. BUT you can still use this for SSR by using the web routes and laravels views, you only need to setup the route for the single page app, and the SSR app. So that routes will not collide with each other.

Project Setup

Run yarn setup. This command will automatically install all the dependencies that you needed.

Serve Project in Development

Run yarn serve. This will serve the web app on your development mode.

To Build the Front End

Run yarn build This will build the frontend app to add it in the laravels public folder so that it can be easily accessed.

Deploying

Create env file on your server

you must create this because most of the variables inside the env files are very important. Just copy the .env.example and change the variables values.

Notes:

  • Make sure that APP_ENV is equals to prod. To Tell the server that is in production.
...
APP_ENV=prod
...
example Deploy Commands
... // clone/checkout your repositories
yarn setup //This will install all the dependencies
yarn front:build // this will build the frontend and adds it in public/app