https://github.com/fumeapp/laranuxt
Laravel and Nuxt.js boilerplate
https://github.com/fumeapp/laranuxt
laravel mdi metapi nuxt nuxt-boilerplate purgecss stylus tailwindcss vuejs
Last synced: 8 days ago
JSON representation
Laravel and Nuxt.js boilerplate
- Host: GitHub
- URL: https://github.com/fumeapp/laranuxt
- Owner: fumeapp
- Created: 2018-12-22T09:29:12.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T00:52:11.000Z (4 months ago)
- Last Synced: 2025-04-07T01:05:55.507Z (15 days ago)
- Topics: laravel, mdi, metapi, nuxt, nuxt-boilerplate, purgecss, stylus, tailwindcss, vuejs
- Language: PHP
- Homepage:
- Size: 12.5 MB
- Stars: 690
- Watchers: 12
- Forks: 137
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Laravel + Nuxt.js Boilerplate
> Now supporting [Nuxt v3](https://nuxt.com)
**Are you using Laravel with vapor? want your Nuxt setup on lambda as well? [TRY FUME!](https://fume.app)**
[](https://nuxt.com)
[](https://laravel.com)
[](https://madewithlaravel.com/p/laranuxt/shield-link)
[](https://github.com/fumeapp/laranuxt/actions/workflows/lint-js.yml)
[](https://github.com/fumeapp/laranuxt/actions/workflows/lint-php.yml)
> Examples on using Dark Mode, authentication, and listing data
### What is included
* [NUXT v3](https://nuxt.com) front end, a progressive Vue.js framework - For Nuxt v2 visit [this branch](https://github.com/fumeapp/laranuxt/tree/nuxt2)
* [nuxt UI](https://ui.nuxt.com) a collection of components built by the NuxtJS team, powered by TailwindCSS
* [Authentication library](https://github.com/fumeapp/laranuxt#api-and-authentication) to assist with user sessions and logging in/out
* Example Authentication Middleware
* [Laravel](https://laravel.com) - for our API - `v11.0.0`
* [Model Typer](https://github.com/fumeapp/modeltyper) - Generates Typescript interfaces from Laravel Models
* [MetAPI](https://github.com/fumeapp/metapi) - API helpers and utilities
* [humble](https://github.com/fumeapp/humble) - Passwordless sessioning with detailed device and location
* [debugbar](https://github.com/barryvdh/laravel-debugbar) - awesome debugbar for our API
* [ide-helper](https://github.com/barryvdh/laravel-ide-helper) - Helper files to enable help with IDE autocompletion
### Installation
* clone from GitHub
* run `pnpm i` and `composer install` to install all of your deps
* copy `.env.example` to `.env` and configure it to your likings
* TL;DR
```bash
git clone [email protected]:fumeapp/laranuxt.git; cd laranuxt; pnpm i; composer install; cp .env.example .env;
```
* Feel free to delete excess media in `/resources/`
### Local Environment
* run `pnpm run dev` in one terminal for our nuxt dev setup
* run `pnpm run api` (alias for `./artisan serve`) in another terminal for our laravel API
### Api and Authentication
* Api and auth can be accessed via the provided `Api` library
```ts
const api = useApi()
console.log(api.$user.name);
```
#### Authentication
* Take a look at [HeaderLoginModal.vue](https://github.com/fumeapp/laranuxt/blob/main/client/components/header/HeaderLoginModal.vue#L143) to see how we pass the credentials to our library
```ts
const redirect = await api.login(result)
if (redirect) await router.push({path: redirect})
```
* Once logged on, you have the ref `api.loggedIn` and the object `api.$user`
```html
![User Avatar]()
```
#### API
The API class provides helper functions to easily retrieve, update, and remove data from your Laravel endpoints. If you use and update [modeltyper](https://github.com/fumeapp/modeltyper) regularly you will always have completely typed results
* To get a listing/index of data, use `api.index`
```ts
const users = api.index('/user', { page: 1 })
```
* To get an individual by id, use `api.get`
```ts
const users = api.get('/user/1')
```
* To update with an id, use `api.put`
```ts
const result = api.put('/user/1', user)
```
* To store a new record, use `api.store`
```ts
const result = api.store('/user', { name: 'Bob', email: '[email protected]' })
```
* To delete with an id, use `api.delete`
```ts
const result = api.delete('/user/1')
```