PhpDev.App
fumeapp/laranuxt

fumeapp/laranuxt

Stars: 553

Forks: 133

Pull Requests: 89

Issues: 26

Watchers: 11

Last Updated: 2023-08-15 16:00:43

#laravel #nuxt #metapi #vuejs #tailwindcss #stylus #purgecss #nuxt-boilerplate #mdi

Laravel and Nuxt.js boilerplate

License:

Languages: JavaScript, PHP, Vue, CSS, Shell, TypeScript, Blade, Dockerfile

Laravel + Nuxt.js Boilerplate

Now supporting Nuxt v3

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

    • tailvue a collection of components built for Nuxt.js, powered by WindiCSS|TailwindCSS
    • Authentication library to assist with user sessions and logging in/out
    • Example Authentication Middleware

  • Laravel - for our API - v9.40.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 yarn 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; yarn; composer install; cp .env.example .env;
  • Feel free to delete excess media in /resources/

Local Environment

  • run yarn dev in one terminal for our nuxt dev setup
  • run yarn 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 boolean 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')

OPEN ISSUES

See all

RELEASES

See all