-
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
dump
call 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
yarn
andcomposer 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 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 dev
in one terminal for our nuxt dev setup
- 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
- 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