burnz / vuetified

Laravel 5.6 Vuetify Real Time Starter App

Vuetified

Laravel + Vuetify realtime starter app.

Table of Contents

1. Requirements
2. Installation
3. Stacks Used
4. Plugins
5. Theme
6. Initial State
7. Linting
8. Issues
9. Pull Request

Requirements

• PHP 7.1+
• Composer
• Node JS
• NPM
• Redis
• VS Code
• Laravel Valet (NGINX) or use Laradock or Homestead

Installation

1. git clone https://github.com/codeitlikemiley/vuetified YOURPROJECTNAME
2. cd YOURPROJECTNAME
3. composer install
4. yarn
5. cp env.example .env
6. php artisan passport:install
7. echo:generate
8. set your .env

• If you want to use Laravel echo then change this to true

ECHO_ON=false

9. php artisan migrate:fresh --seed
10. node websocket
11. Serve Your Site
    • laravel valet - valet link YOURSITE
    • laradock - docker-compose up -d nginx redis mysql
    • homestead - homestead up yourprojectname.test/

Stacks Used

• Laravel
• Vue
• Laravel Passport for Oauth and authentication
• Vuetified for UI
• Laravel Echo for real-time broadcasting
• Laravel Horizon for queueing jobs
• Laravel Socialite for integration of third-party OAuth
• VS Code plugins for intelligent code fixing and linting

Plugins

Here you can add extra plugins to your app:

//! Order is important if other services depend on it */
//! Primary Services add here

import './services/vuetify' //! Configuring Themes and Components

import './services/vue-axios' //! For making API calls

import './services/bus' //! Global event bus

import './services/vuex' //! State management

import './services/echo' //! Websocket

import './services/initial-state' //! Seed initial data to your app 
//! @ Vuetified/Configuration/ProvidesScriptVariables.php

import('./services/forms') //! Declare your global form objects here

import './services/vee-validate' //! Form validation

import './services/youtube' //! YouTube component


//! Secondary services that depend on the primary services
//! i.e: Vuex in our ACL service
import './services/acl'

Theme

Open resources/assets/js/services/vuetify.js and the edit theme object:

theme: {
        primary: '#ef9a9a',
        secondary: '#607d8b',
        accent: '#4db6ac',
        error: '#b71c1c',
        info: '#bbdefb',
        success: '#a5d6a7',
        warning: '#ffc107'
    }

Inital State

Open Vuetified/Configuration/ProvidesScriptVariables.php

Add your initial data as an array:

public static function scriptVariables()
    {
        return [
            'csrfToken' => csrf_token(),
            'env' => config('app.env'),
            'api_endpoint' => config('app.api'),
            'sponsor' => self::getSponsor()
        ];
    }

Linting

If your using VS Code which I highly recommend since they offer great plugins for Vue and ES lint.

You can PM me directly at Facebook So I can share my settings.

Install VS Code, then install this plugin Settings Sync.

Issues

If you have seen any bugs please report it by making an issue.

Pull Request

If you want to add components to be part of vuetified please make a pull request.