Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months 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 (almost 6 years ago)
Default Branch: main
Last Pushed: 2024-03-05T03:27:25.000Z (8 months ago)
Last Synced: 2024-05-29T03:10:58.368Z (6 months ago)
Topics: laravel, mdi, metapi, nuxt, nuxt-boilerplate, purgecss, stylus, tailwindcss, vuejs
Language: PHP
Homepage:
Size: 12.3 MB
Stars: 622
Watchers: 12
Forks: 137
Open Issues: 7
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')

```