Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 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 (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T00:52:11.000Z (14 days ago)
- Last Synced: 2024-12-13T11:04:43.919Z (11 days ago)
- Topics: laravel, mdi, metapi, nuxt, nuxt-boilerplate, purgecss, stylus, tailwindcss, vuejs
- Language: PHP
- Homepage:
- Size: 12.5 MB
- Stars: 671
- 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://img.shields.io/badge/nuxt.js-v3.7-04C690.svg)](https://nuxt.com)
[![](https://img.shields.io/badge/Laravel-v11.0.0-ff2e21.svg)](https://laravel.com)
[![MadeWithLaravel shield](https://madewithlaravel.com/storage/repo-shields/3372-shield.svg)](https://madewithlaravel.com/p/laranuxt/shield-link)![Test PHP](https://github.com/fumeapp/laranuxt/workflows/Test%20PHP/badge.svg)
[![Lint Javascript](https://github.com/fumeapp/laranuxt/actions/workflows/lint-js.yml/badge.svg)](https://github.com/fumeapp/laranuxt/actions/workflows/lint-js.yml)
[![Lint PHP](https://github.com/fumeapp/laranuxt/actions/workflows/lint-php.yml/badge.svg)](https://github.com/fumeapp/laranuxt/actions/workflows/lint-php.yml)![](resources/laranuxt.gif)
> 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
```#### 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')
```