orumad/how-to-setup-laravel-53-vue-js-semantic-ui-project.md

## how-to-setup-laravel-53-vue-js-semantic-ui-project.md

      
    Raw
  

              how-to-setup-laravel-53-vue-js-semantic-ui-project.md
            
          
    How to setup Laravel 5.3 + Vue.js + Semantic UI project

Create a new Laravel project with composer:
$ composer create-project Laravel/Laravel myproject

Create the database for the project:
$ mysql -uroot
...
> create database myproject;
...
> exit

Edit the .env file with the project info:
...
APP_URL=http://goals.app
APP_NAME=Goals
...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myproject
DB_USERNAME=root
DB_PASSWORD=
...
MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=248ae0aa64886f
MAIL_PASSWORD=4050e4b023ad1b
MAIL_ENCRYPTION=tls

If we need the Laravel's auth system:
$ art make:auth
$ art migrate

Install Laravel Elixir, Vue.js, Gulp, etc.:
$ npm install

Install Semantic UI:
$ npm install semantic-ui --save-dev
...
> Automatic
> Yes
? semantic/

To build Semantic UI:
$ cd semantic
$ gulp build

Modify the gulpfile.js to include the Semantic UI's files:
elixir(mix => {
    mix.sass('app.scss')
	   .webpack('app.js')
   	   .copy('semantic/dist/semantic.min.css', 'public/css/semantic.min.css')
   	   .copy('semantic/dist/semantic.min.js', 'public/js/semantic.min.js');
});