Laravel & Vue Starter Project

laravel-vue-starter.txt

Created: 12-16-2018
Laravel: 5.7.*
Vue: 2.5.17

// user > Code dir. (specific version) (--prefer-dist: https://getcomposer.org/doc/03-cli.md#install-i)
$ laravel new project-name (or) composer create-project laravel/laravel project-name ("5.0.*" --prefer-dist)


// check for any composer package updates
$ composer update


// install node dependencies
$ npm install


// setup database connection in .env of project
DB_DATABASE=database_name


// nav to Homestead.yaml
$ cd Homestead && vi Homestead.yaml


// update Homestead.yaml with project dir. & database
// project
- map: project-name.test
to: /home/vagrant/Code/project-name/public


// database
- database_name


// :wq


// in terminal
$ vagrant reload --provision


$ sudo vi /etc/hosts


// add site domain to /etc/hosts
192.168.10.10 project-name.test


// add to Laravel Valet


// list all linked sites
$ valet links


// from project root dir. link to valet
$ valet link project-name


// check linked
$ valet links


// view in browser by visiting "project-name.test"


// generate Laravel authentication
$ php artisan make:auth


// view in browser by visiting "project-name.test" (should see login & register)


// register a couple of users


// migrate database schemas via vagrant ssh
$ vagrant ssh


$ cd Code/project-name


$ php artisan migrate


// create first API route in routes/api.php
Route::get('users', function(User $user) {
    return User::all();
});


// view in browser by visiting "project-name.test/api/users" (should see all users returned in JSON)


// Create UserCtrl with REST actions
$ php artisan make:controller UserController --resource


// Update UserCtrl@index()
return User::all();


// update routes/api.php
Route::resource('users', 'UserController');


// view in browser by visiting "project-name.test/api/users" (should see all users returned in JSON)


// installing vue
$ npm run dev


// install vue-router
$ npm i -—save-dev vue-router


// change home route in routes/web.php
// from
Route::get('/home', 'HomeController@index')->name('home');
// to
Route::get('/', 'HomeController@index');


// in js/app.js
// comment out
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

import router from './router' // add

const app = new Vue({
    el: '#app',
    router // add
});


// create resources/js/router.js with the following
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from './components/HomePage.vue'
import ExampleComponent from './components/ExampleComponent.vue'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HomePage, name: 'home' },
        { path: '/ex', component: ExampleComponent, name: 'example' }
    ]
});


// add to app.blade.php
<router-view></router-view>


// add the follwoing links as well or put in resources/views/layouts/nav.blade.php
// replace link around Logo
<router-link class="navbar-brand" :to="{ name: 'home' }">
    {{ config('app.name', 'Laravel') }}
</router-link>

<router-link class="nav-link" :to="{ name: 'example' }">
    Example Page
</router-link>


// create a HomePage.vue


// update HomePage.vue & ExampleComponent with <router-links> to each component