heena-patel / laranuxt

Laravel and Nuxt.js boilerplate

Laravel + Nuxt.js Boilerplate

What is included

• NUXT front end, a progressive Vue.js framework - v2.14.0

  • @nuxtjs/axios to communicate with our API - v5.11.0
  • @nuxtjs/pwa Heavily tested, updated and stable PWA solution - v3.0.0
  • @nuxt/components Auto import components - v1.0.3
  • @nuxtjs/tailwindcss a utility-first framework - now with PurgeCSS built in - v2.0.0
  • stylus - expressive, dynamic, robust css - v0.54.8
  • pug - high-performance template engine - v3.0.0
  • mdi - material design icons with a ton of contributed ones as well - v5.4.55

• Laravel - for our API - v7.22.4

  • metapi - API helpers and utilities - v2.1.0
  • debugbar - awesome debugbar for our API - v3.4.3
  • ide-helper - Helper files to enable accurate IDE autocompletion - v2.8.0
  • dump-server - Collect your dump call outputs and show them separately - v1.4.0

• Global Programmatic Components

  • Global Toast Component
    • Info, danger, warning, and success
    • Optional timeout
    • Properly captures and shows PHP errors from the back-end
    • Link to file:line in PHPStorm
    • Ex: this.$toast.show('this is a toast') or this.$toast.show({type: 'danger', message: 'this is an error'})
  • Global Modal Component
    • Programmatic with actions that turn into buttons
    • Customizable using the BaseModal component
    • Ex:

this.$modal.show({
  body: 'test modal with actions',
  actions: [
    { name: 'Confirm', action: () => this.$toast.show('confirmed') },
    { name: 'Cancel', action: () => this.$toast.show('canceled') },
  ],
})

• metapi packaged with built-in support by the Toast component
  • Now with Dracula dark mode to pair nicely with laravel-debugbar

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
  • i do this to speed up reactivity and compilation time
• running yarn mdi will copy all the fonts and css to resources/static/
• TL;DR

git clone [email protected]:acidjazz/laranuxt.git; cd laranuxt; yarn; composer install; yarn mdi; cp .env.example .env;

• Feel free to delete media/, this folder is only to store images for the readme

Local environment

• run yarn api (alias for ./artisan serve) in another terminal for our laravel API
• run yarn dev in one terminal for our nuxt dev setup

I don't want pug

• Copy+Paste the pug section of each .vue into pughtml and paste the html back
• Be sure to remove lang="pug" in the <template> tag
• yarn remove pug pug-plain-loader

I don't want stylus

• Copy+Paste the stylus section of each .vue|.styl into stylus2css and paste the CSS back
• Be sure to remove lang="stylus" in the <style> tag
• yarn remove stylus stylus-loader