Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 4.09 KB

readme.md

File metadata and controls

102 lines (75 loc) · 4.09 KB
Raw

Laravel + Nuxt.js Boilerplate

Now supporting Nuxt v3

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

MadeWithLaravel shield

Test PHP Lint Javascript Lint PHP

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 [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
const api = useApi()
console.log(api.$user.name);

Authentication

  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="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: '[email protected]' })
  • To delete with an id, use api.delete
const result = api.delete<api.MetApiResponse>('/user/1')