Laravel + Nuxt.js Boilerplate

Now supporting Nuxt v3

Are you using Laravel with vapor? want your Nuxt setup on lambda as well? TRY FUME!

Examples on using Dark Mode, authentication, and listing data

What is included

• NUXT v3 front end, a progressive Vue.js framework - For Nuxt v2 visit this branch

  • nuxt UI a collection of components built by the NuxtJS team, powered by TailwindCSS
  • Authentication library to assist with user sessions and logging in/out
  • Example Authentication Middleware

• Laravel - for our API - v11.0.0

  • Model Typer - Generates Typescript interfaces from Laravel Models
  • MetAPI - API helpers and utilities
  • humble - Passwordless sessioning with detailed device and location
  • debugbar - awesome debugbar for our API
  • 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

  git clone git@github.com: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

const api = useApi()
console.log(api.$user.name);

Authentication

• Take a look at HeaderLoginModal.vue to see how we pass the credentials to our library

  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

  <img class="w-8 h-8 rounded-full bg-blue-400" :src="https://github.com/fumeapp/laranuxt/raw/main/api.$user.avatar" alt="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 regularly you will always have completely typed results

• To get a listing/index of data, use api.index

  const users = api.index<models.UserResults>('/user', { page: 1 })

• To get an individual by id, use api.get

  const users = api.get<models.User>('/user/1')

• To update with an id, use api.put

  const result = api.put<api.MetapiResponse>('/user/1', user)

• To store a new record, use api.store

  const result = api.store<api.MetApiResponse>('/user', { name: 'Bob', email: 'bob@mail.com' })

• To delete with an id, use api.delete

  const result = api.delete<api.MetApiResponse>('/user/1')