Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save orumad/9a7d909daef4b6698cff109eeb9b546c to your computer and use it in GitHub Desktop.
Save orumad/9a7d909daef4b6698cff109eeb9b546c to your computer and use it in GitHub Desktop.
How to setup Laravel 5.3 + Vue.js + Semantic UI project

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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment