An application / authentication starter kit frontend in Vue.js 3 for Laravel Breeze.

Last update: Dec 17, 2022

Overview

Laravel Breeze - Vue.js 3 Edition

Inspiration

This project was inspired by the Breeze Next.js project. 🏝️

Introduction

This repository is an implementing of the Laravel Breeze application / authentication starter kit frontend in Vue.js. All of the authentication boilerplate is already written for you - powered by Laravel Sanctum, allowing you to quickly begin pairing your beautiful Vue.js frontend with a powerful Laravel backend.

Documentation

Installation

First, create a Vue.js compatible Laravel backend by installing Laravel Breeze into a fresh Laravel application and installing Breeze's API scaffolding:

# Create the Laravel application...
laravel new vue-backend

cd vue-backend

# Install Breeze and dependencies...
composer require laravel/breeze

php artisan breeze:install api

Next, ensure that your application's APP_URL and FRONTEND_URL environment variables are set to http://localhost:8000 and http://localhost:3000, respectively.

After defining the appropriate environment variables, you may serve the Laravel application using the serve Artisan command:

# Serve the application...
php artisan serve

Next, clone this repository and install its dependencies with yarn install or npm install. Then, copy the .env.example file to .env and supply the URL of your backend:

VITE_APP_NAME=Breeze Vue.js 3 Api
VITE_PUBLIC_BACKEND_URL=http://localhost:8000

Finally, run the application via npm run dev. The application will be available at http://localhost:3000:

npm run dev

Note: Currently, we recommend using localhost during local development of your backend and frontend to avoid CORS "Same-Origin" issues.

License

Laravel Breeze - Vue.js 3 Edition is open-sourced software licensed under the MIT license.

You might also like...

Laravel Vue SPA, Bulma themed. For demo login use `admin@laravel-enso.com` & `password` -

Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

1k Jan 3, 2023

Laravel-weather-app - Laravel Weather App Built With Vue.js

Laravel Weather App Installation Clone the repo locally: git clone https://githu

0 Jan 14, 2022

Vuelar (Vue-Laravel) - A Laravel-powered pagination package for Vuejs

vuelar (Vue-Laravel) is a vue package that takes care of pagination for a Laravel-powered backend on a Single-Page Application. This package assumes familiarity with Laravel and requires vue-router for navigation.

10 Jul 31, 2022

Maple-Forest-Frontend - CRM system (Frontend)

Maple-Forest-Frontend Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build

0 Jan 2, 2022

P7Groupo Frontend - Frontend du projet 7 de la formation "Developpeur Web" pour OpenClassroom

Frontend du projet 7 de la formation "Developpeur Web" pour OpenClassroom Objectif Construire un réseau social interne pour les employés de Groupomani

0 Jan 10, 2022

A Web Application built on Laravel + Vue. Based on the Pokemon API

10 Jun 14, 2022

Form object to use with Vue components for sending data to a Laravel application using axios.

Form Object Important: This project still active, feel free to clone, open issues or ask for help Form Object is a simple layer on top of axios, it un

72 Jan 13, 2022

Model statistics dashboard for your Laravel Application

Laravel Model Stats Model statistics dashboard for your Laravel Application This Laravel packages gives you a statistic dashboard for you Laravel appl

220 Dec 27, 2022

The open source Vue.js frontend (mobile and cordova app) for the argentinian carpooling application: Carpoolear

Carpoolear frontend Español Carpoolear es la primera aplicación argentina de Facebook que permite a los usuarios de dicha red social compartir viajes

80 Dec 14, 2022

Comments

Proposal for name spacing pull request - rename BreezeComponent to Component

I was wondering if this pull request that I wanted to do would be useful. It's modelled after Laravel Breeze pull request #179, Remove "Breeze" component prefix

The idea would be to limit the scope to just the Breeze component renames. If you are happy with the changes, then I could possibly attempt more of the renaming that happened in that pull request. But for now, just those renames.

The reason for doing this would be to align this repository with the official Laravel Breeze repository as much as possible and then hopefully keep it future. I found this repository very useful because I'm developing an offline PWA so I can't use Inertia and server side routing.

@faisalfjri what do you think?

opened by eugenevdm 2
Remove Breeze prefix and double name space some other components
This pull request is modelled after the official Laravel Breeze pull request #179.

The idea was to remove the word Breeze from BreezeComponentName and streamline this repo with the official Breeze one.

These two files are now similar to the Breeze counterparts, in both filename and component name.

BreezeAuthenticatedLayout => AuthenticatedLayout => AuthenticatedLayout.vue

BreezeGuestLayout => GuestLayout => GuestLayout.vue

To avoid components that overlap with native HTML elements, the following components have been renamed:

Input => TextInput

Label => InputLabel

This is a breaking change.
opened by eugenevdm 1

Owner

Faisal fajri

GitHub

A complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Laravel Framework using the easy GraphQL queries language. And ready to use the Google Firebase features.

Laqu-l A complete starter kit that allows you create amazing apps that look native thanks to the Quasar Framework. Powered by an API developed in Lara

130 Dec 27, 2022

Vue.js3 Authentication - This is Authentication with Vue.js 3 Cli using Firebase

vue-authentication Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run bui

1 Feb 5, 2022

Starter application template using Piccolo ORM ecosystem as backend and Vue.js as frontend

Starter application template using Piccolo ORM ecosystem (with FastAPI framework) as backend and Vue.js as frontend.

5 Dec 22, 2022

Starter kit to accelerate the development of new applications.

[WIP] Laravel Jetstream Inertia Vue PrimeVue Starter Starter kit to accelerate the development of new applications. Features Laravel 8 Inertia.js Jets

9 Dec 28, 2022

Tech blog starter-kit with vue3, nuxt3 and Contentful

Tech blog starter-kit with vue3, nuxt3 and Contentful Vue3 - used setup script Nuxt3 TypeScript Tools: Vite, Yarn 3, Volar Styles: Primeflex, Primeico

30 Dec 22, 2022

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue

Multiple Authentication Using Laravel-Jetstream With Inertia-Vue About Jetstream-Inertia-Vue Multi-Auth It is a user-based multiple authentication sys

7 Sep 22, 2022

User registration and authentication frontend library for Django Manifest.

Vue Manifest User registration and authentication frontend library for Django Manifest. Still in development. Installation npm install vue-manifest Us

1 Aug 16, 2020

Starter template for vue 3 applications with authentication

VVDDA vue3-vuetify3-django-djoser-authentication-template To do: * add form vali

7 Nov 14, 2022

Vue startup application template that uses ASP.NET Core API layered architecture at the back-end and JWT based authentication

Nucleus Web API startup template with a Vue Client application. Requirements Vue CLI v3.x or later. Nodejs v10.x or later. Visual Studio 2019 v16.3 or

340 Dec 9, 2022

A vue application which provides read-only function without authentication or post module

Elog mobile Elog mobile web pages developed and deployed at CSNS (China Spallation Neutron Source), it is a lightweight web application which provides

1 Jun 6, 2022