-
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
- @nuxtjs/axios to communicate with our API -
-
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
dumpcall outputs and show them separately -v1.4.0
- metapi - API helpers and utilities -
-
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')orthis.$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:
- Global Toast Component
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
- clone from github
- run
yarnandcomposer installto install all of your deps - copy
.env.exampleto.envand configure it to your likings- i do this to speed up reactivity and compilation time
- running
yarn mdiwill copy all the fonts and css toresources/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
- run
yarn api(alias for./artisan serve) in another terminal for our laravel API - run
yarn devin one terminal for our nuxt dev setup
- Copy+Paste the pug section of each
.vueinto pughtml and paste the html back - Be sure to remove
lang="pug"in the<template>tag yarn remove pug pug-plain-loader
- Copy+Paste the stylus section of each
.vue|.stylinto stylus2css and paste the CSS back - Be sure to remove
lang="stylus"in the<style>tag yarn remove stylus stylus-loader