├── .gitignore
├── src
    ├── resources
    │   ├── assets
    │   │   ├── sass
    │   │   │   ├── app.scss
    │   │   │   └── style.css
    │   │   └── js
    │   │   │   ├── common.js
    │   │   │   ├── components
    │   │   │       └── Example.vue
    │   │   │   ├── app.js
    │   │   │   └── bootstrap.js
    │   └── views
    │   │   └── welcome.blade.php
    └── VueSemanticUiServiceProvider.php
├── gulpfile.js
├── webpack.mix.js
├── semantic.json
├── README.md
├── composer.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /public/storage
3 | /public/hot
4 | /storage/*.key
5 | /vendor
6 | /.idea
7 | 


--------------------------------------------------------------------------------
/src/resources/assets/sass/app.scss:
--------------------------------------------------------------------------------
1 | @import "../dist/semantic/semantic.min.css";
2 | @import "style.css";
3 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var
 2 |   gulp         = require('gulp'),
 3 |   watch        = require('./resources/assets/semantic/tasks/watch'),
 4 |   build        = require('./resources/assets/semantic/tasks/build')
 5 | ;
 6 | 
 7 | 
 8 | /*******************************
 9 |              Tasks
10 | *******************************/
11 | gulp.task('watch-ui', watch);
12 | gulp.task('build-ui', build);


--------------------------------------------------------------------------------
/src/resources/assets/js/common.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function () {
 2 |   $('.masthead')
 3 |     .visibility({
 4 |       once: false,
 5 |       onBottomPassed: function () {
 6 |         $('.fixed.menu').transition('fade in');
 7 |       },
 8 |       onBottomPassedReverse: function () {
 9 |         $('.fixed.menu').transition('fade out');
10 |       }
11 |     });
12 | 
13 |   // create sidebar and attach to menu open
14 |   $('.ui.sidebar')
15 |     .sidebar('attach events', '.toc.item');
16 | });


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | const { mix } = require('laravel-mix');
 2 | 
 3 | /*
 4 |  |--------------------------------------------------------------------------
 5 |  | Mix Asset Management
 6 |  |--------------------------------------------------------------------------
 7 |  |
 8 |  | Mix provides a clean, fluent API for defining some Webpack build steps
 9 |  | for your Laravel application. By default, we are compiling the Sass
10 |  | file for the application as well as bundling up all the JS files.
11 |  |
12 |  */
13 | 
14 | mix.js('resources/assets/js/app.js', 'public/js')
15 |    .sass('resources/assets/sass/app.scss', 'public/css');
16 | 


--------------------------------------------------------------------------------
/semantic.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "autoInstall": true,
 3 |   "base": "resources/assets/semantic",
 4 |   "paths": {
 5 |     "source": {
 6 |       "config": "src/theme.config",
 7 |       "definitions": "src/definitions/",
 8 |       "site": "src/site/",
 9 |       "themes": "src/themes/"
10 |     },
11 |     "output": {
12 |       "packaged": "../dist/semantic",
13 |       "uncompressed": "../dist/semantic/components/",
14 |       "compressed": "../dist/semantic/components/",
15 |       "themes": "../dist/semantic/themes/"
16 |     },
17 |     "clean": "../dist/semantic"
18 |   },
19 |   "permission": false,
20 |   "rtl": false,
21 |   "version": "2.2.10"
22 | }


--------------------------------------------------------------------------------
/src/resources/assets/js/components/Example.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="col-md-8 col-md-offset-2">
 5 |                 <div class="panel panel-default">
 6 |                     <div class="panel-heading">Example Component</div>
 7 | 
 8 |                     <div class="panel-body">
 9 |                         I'm an example component!
10 |                     </div>
11 |                 </div>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 |     export default {
19 |         mounted() {
20 |             console.log('Component mounted.')
21 |         }
22 |     }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/app.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * First we will load all of this project's JavaScript dependencies which
 4 |  * includes Vue and other libraries. It is a great starting point when
 5 |  * building robust, powerful web applications using Vue and Laravel.
 6 |  */
 7 | 
 8 | require('./bootstrap');
 9 | 
10 | /**
11 |  * Next, we will create a fresh Vue application instance and attach it to
12 |  * the page. Then, you may begin adding components to this application
13 |  * or customize the JavaScript scaffolding to fit your unique needs.
14 |  */
15 | 
16 | //Vue.component('example', require('./components/Example.vue'));
17 | 
18 | //const app = new Vue({
19 | //    el: '#app'
20 | //});
21 | 
22 | require('./common')


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## The Vue2 with ElemeFE/element for Laravel 5.4
 2 | 
 3 | - Starter kit Vue2 in conjunction with SemanticUi for Laravel 5.4
 4 | - Video [demo](https://youtu.be/8YscWJrfJmg) 5min
 5 |  
 6 | ## Installation
 7 | 
 8 | ```sh
 9 | $ laravel new project && cd project/
10 | $ composer require maxlab/laravel-vue-semantic-ui
11 | ```
12 | 
13 | Then add to config/app.php
14 | ```php
15 | Maxlab\VueSemanticUi\VueSemanticUiServiceProvider::class
16 | ```
17 | 
18 | Then
19 | ```sh
20 | $ php artisan vendor:publish --force --provider="Maxlab\VueSemanticUi\VueSemanticUiServiceProvider"
21 | $ npm install && npm run dev-ui
22 | ```
23 | 
24 | ## License
25 | 
26 | The Laravel framework is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
27 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "maxlab/laravel-vue-semantic-ui",
 3 |   "description": "Laravel 5 starter semantic-ui vue2",
 4 |   "keywords": [
 5 |     "vue-laravel",
 6 |     "laravel-starter-semantic-ui",
 7 |     "laravel-vue-semantic-ui",
 8 |     "laravel",
 9 |     "laravel-rad",
10 |     "laravel5",
11 |     "laravel-edition",
12 |     "semantic-ui",
13 |     "laravel-rad"
14 |   ],
15 |   "type": "project",
16 |   "license": "MIT",
17 |   "homepage": "https://github.com/Maxlab/laravel-vue-semantic-ui",
18 |   "require": {
19 |     "php": ">=5.6.4",
20 |     "laravel/framework": "5.4.*"
21 |   },
22 |   "autoload": {
23 |     "psr-4": {
24 |       "Maxlab\\VueSemanticUi\\": "src/"
25 |     }
26 |   },
27 |   "minimum-stability": "dev",
28 |   "prefer-stable": true
29 | }
30 | 


--------------------------------------------------------------------------------
/src/VueSemanticUiServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php namespace Maxlab\VueSemanticUi;
 2 | 
 3 | use Illuminate\Support\ServiceProvider;
 4 | 
 5 | class VueSemanticUiServiceProvider extends ServiceProvider
 6 | {
 7 |     /**
 8 |      * Bootstrap any application services.
 9 |      *
10 |      * @return void
11 |      */
12 |     public function boot()
13 |     {
14 |         $this->publishes([
15 |             __DIR__.'/../src/resources/assets' => resource_path('/assets'),
16 |             __DIR__.'/../src/resources/views' => resource_path('/views'),
17 |             __DIR__.'/../package.json' => base_path('/package.json'),
18 |             __DIR__.'/../semantic.json' => base_path('/semantic.json'),
19 |             __DIR__.'/../gulpfile.js' => base_path('/gulpfile.js'),
20 |             __DIR__.'/../webpack.mix.js' => base_path('/webpack.mix.js'),
21 |         ], 'laravel-vue-semantic-ui');
22 |     }
23 | 
24 |     /**
25 |      * Register any application services.
26 |      *
27 |      * @return void
28 |      */
29 |     public function register()
30 |     {
31 | 
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "npm run development",
 5 |     "dev-ui": "gulp build-ui && npm run development",
 6 |     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 7 |     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 8 |     "watch-ui": "gulp watch-ui && cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 9 |     "watch-poll": "npm run watch -- --watch-poll",
10 |     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
11 |     "prod": "npm run production",
12 |     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
13 |   },
14 |   "devDependencies": {
15 |     "axios": "0.15.3",
16 |     "minimatch": "^3.0.2",
17 |     "graceful-fs": "^4.0.0",
18 |     "cross-env": "3.2.3",
19 |     "jquery": "2.2.*",
20 |     "laravel-mix": "0.*",
21 |     "lodash": "4.17.4",
22 |     "vue": "2.1.*",
23 |     "vue-template-compiler": "2.1.*",
24 |     "semantic-ui": "2.2.10",
25 |     "optipng-bin": "3.1.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/resources/assets/js/bootstrap.js:
--------------------------------------------------------------------------------
 1 | 
 2 | window._ = require('lodash');
 3 | 
 4 | /**
 5 |  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 6 |  * for JavaScript based Bootstrap features such as modals and tabs. This
 7 |  * code may be modified to fit the specific needs of your application.
 8 |  */
 9 | 
10 | window.$ = window.jQuery = require('jquery');
11 | 
12 | /**
13 |  * Vue is a modern JavaScript library for building interactive web interfaces
14 |  * using reactive data binding and reusable components. Vue's API is clean
15 |  * and simple, leaving you to focus on building your next great project.
16 |  */
17 | 
18 | window.Vue = require('vue');
19 | 
20 | /**
21 |  * We'll load the axios HTTP library which allows us to easily issue requests
22 |  * to our Laravel back-end. This library automatically handles sending the
23 |  * CSRF token as a header based on the value of the "XSRF" token cookie.
24 |  */
25 | 
26 | window.axios = require('axios');
27 | //window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
28 | //window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
29 | 
30 | /**
31 |  * Echo exposes an expressive API for subscribing to channels and listening
32 |  * for events that are broadcast by Laravel. Echo and event broadcasting
33 |  * allows your team to easily build robust real-time web applications.
34 |  */
35 | require("../dist/semantic/semantic")
36 | // import Echo from 'laravel-echo'
37 | 
38 | // window.Pusher = require('pusher-js');
39 | 
40 | // window.Echo = new Echo({
41 | //     broadcaster: 'pusher',
42 | //     key: 'your-pusher-key'
43 | // });
44 | 


--------------------------------------------------------------------------------
/src/resources/assets/sass/style.css:
--------------------------------------------------------------------------------
  1 | .hidden.menu {
  2 |   display: none;
  3 | }
  4 | 
  5 | .masthead.segment {
  6 |   min-height: 700px;
  7 |   padding: 1em 0em;
  8 | }
  9 | 
 10 | .masthead .logo.item img {
 11 |   margin-right: 1em;
 12 | }
 13 | 
 14 | .masthead .ui.menu .ui.button {
 15 |   margin-left: 0.5em;
 16 | }
 17 | 
 18 | .masthead h1.ui.header {
 19 |   margin-top: 3em;
 20 |   margin-bottom: 0em;
 21 |   font-size: 4em;
 22 |   font-weight: normal;
 23 | }
 24 | 
 25 | .masthead h2 {
 26 |   font-size: 1.7em;
 27 |   font-weight: normal;
 28 | }
 29 | 
 30 | .ui.vertical.stripe {
 31 |   padding: 8em 0em;
 32 | }
 33 | 
 34 | .ui.vertical.stripe h3 {
 35 |   font-size: 2em;
 36 | }
 37 | 
 38 | .ui.vertical.stripe .button + h3,
 39 | .ui.vertical.stripe p + h3 {
 40 |   margin-top: 3em;
 41 | }
 42 | 
 43 | .ui.vertical.stripe .floated.image {
 44 |   clear: both;
 45 | }
 46 | 
 47 | .ui.vertical.stripe p {
 48 |   font-size: 1.33em;
 49 | }
 50 | 
 51 | .ui.vertical.stripe .horizontal.divider {
 52 |   margin: 3em 0em;
 53 | }
 54 | 
 55 | .quote.stripe.segment {
 56 |   padding: 0em;
 57 | }
 58 | 
 59 | .quote.stripe.segment .grid .column {
 60 |   padding-top: 5em;
 61 |   padding-bottom: 5em;
 62 | }
 63 | 
 64 | .footer.segment {
 65 |   padding: 5em 0em;
 66 | }
 67 | 
 68 | .secondary.pointing.menu .toc.item {
 69 |   display: none;
 70 | }
 71 | 
 72 | @media only screen and (max-width: 700px) {
 73 |   .ui.fixed.menu {
 74 |     display: none !important;
 75 |   }
 76 | 
 77 |   .secondary.pointing.menu .item,
 78 |   .secondary.pointing.menu .menu {
 79 |     display: none;
 80 |   }
 81 | 
 82 |   .secondary.pointing.menu .toc.item {
 83 |     display: block;
 84 |   }
 85 | 
 86 |   .masthead.segment {
 87 |     min-height: 350px;
 88 |   }
 89 | 
 90 |   .masthead h1.ui.header {
 91 |     font-size: 2em;
 92 |     margin-top: 1.5em;
 93 |   }
 94 | 
 95 |   .masthead h2 {
 96 |     margin-top: 0.5em;
 97 |     font-size: 1.5em;
 98 |   }
 99 | }
100 | 
101 | 
102 | 


--------------------------------------------------------------------------------
/src/resources/views/welcome.blade.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="{{ config('app.locale') }}">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <title>Laravel</title>
  8 |     <link rel="stylesheet" href="{{mix('css/app.css')}}"/>
  9 | </head>
 10 | <body>
 11 | 
 12 | <!-- Following Menu -->
 13 | <div class="ui large top fixed hidden menu">
 14 |     <div class="ui container">
 15 |         <a class="active item">Home</a>
 16 |         <a class="item">Work</a>
 17 |         <a class="item">Company</a>
 18 |         <a class="item">Careers</a>
 19 |         <div class="right menu">
 20 |             <div class="item">
 21 |                 <a class="ui button">Log in</a>
 22 |             </div>
 23 |             <div class="item">
 24 |                 <a class="ui primary button">Sign Up</a>
 25 |             </div>
 26 |         </div>
 27 |     </div>
 28 | </div>
 29 | 
 30 | <!-- Sidebar Menu -->
 31 | <div class="ui vertical inverted sidebar menu">
 32 |     <a class="active item">Home</a>
 33 |     <a class="item">Work</a>
 34 |     <a class="item">Company</a>
 35 |     <a class="item">Careers</a>
 36 |     <a class="item">Login</a>
 37 |     <a class="item">Signup</a>
 38 | </div>
 39 | 
 40 | 
 41 | <!-- Page Contents -->
 42 | <div class="pusher">
 43 |     <div class="ui vertical teal inverted masthead center aligned segment">
 44 | 
 45 |         <div class="ui container">
 46 |             <div class="ui large secondary inverted menu">
 47 |                 <a class="toc item">
 48 |                     <i class="sidebar icon"></i>
 49 |                 </a>
 50 |                 <a class="active item">Home</a>
 51 |                 <a class="item">Work</a>
 52 |                 <a class="item">Company</a>
 53 |                 <a class="item">Careers</a>
 54 |                 <div class="right item">
 55 |                     <a class="ui inverted button">Log in</a>
 56 |                     <a class="ui inverted button">Sign Up</a>
 57 |                 </div>
 58 |             </div>
 59 |         </div>
 60 | 
 61 |         <div class="ui text container">
 62 |             <h1 class="ui inverted header">
 63 |                 Imagine-a-Company
 64 |             </h1>
 65 |             <h2>Do whatever you want when you want to.</h2>
 66 |             <div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
 67 |         </div>
 68 | 
 69 |     </div>
 70 | 
 71 |     <div class="ui vertical stripe segment">
 72 |         <div class="ui middle aligned stackable grid container">
 73 |             <div class="row">
 74 |                 <div class="eight wide column">
 75 |                     <h3 class="ui header">We Help Companies and Companions</h3>
 76 |                     <p>We can give your company superpowers to do things that they never thought possible. Let us
 77 |                         delight your customers and empower your needs...through pure data analytics.</p>
 78 |                     <h3 class="ui header">We Make Bananas That Can Dance</h3>
 79 |                     <p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be
 80 |                         bioengineered.</p>
 81 |                 </div>
 82 |                 <div class="six wide right floated column">
 83 |                     <img src="https://semantic-ui.com/examples/assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
 84 |                 </div>
 85 |             </div>
 86 |             <div class="row">
 87 |                 <div class="center aligned column">
 88 |                     <a class="ui huge button">Check Them Out</a>
 89 |                 </div>
 90 |             </div>
 91 |         </div>
 92 |     </div>
 93 | 
 94 | 
 95 |     <div class="ui vertical stripe quote segment">
 96 |         <div class="ui equal width stackable internally celled grid">
 97 |             <div class="center aligned row">
 98 |                 <div class="column">
 99 |                     <h3>"What a Company"</h3>
100 |                     <p>That is what they all say about us</p>
101 |                 </div>
102 |                 <div class="column">
103 |                     <h3>"I shouldn't have gone with their competitor."</h3>
104 |                     <p>
105 |                         <img src="https://semantic-ui.com/examples/assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer
106 |                         Acme Toys
107 |                     </p>
108 |                 </div>
109 |             </div>
110 |         </div>
111 |     </div>
112 | 
113 |     <div class="ui vertical stripe segment">
114 |         <div class="ui text container">
115 |             <h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
116 |             <p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing
117 |                 nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic
118 |                 and worth your attention.</p>
119 |             <a class="ui large button">Read More</a>
120 |             <h4 class="ui horizontal header divider">
121 |                 <a href="#">Case Studies</a>
122 |             </h4>
123 |             <h3 class="ui header">Did We Tell You About Our Bananas?</h3>
124 |             <p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really
125 |                 true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
126 |             <a class="ui large button">I'm Still Quite Interested</a>
127 |         </div>
128 |     </div>
129 | 
130 | 
131 |     <div class="ui inverted vertical footer segment">
132 |         <div class="ui container">
133 |             <div class="ui stackable inverted divided equal height stackable grid">
134 |                 <div class="three wide column">
135 |                     <h4 class="ui inverted header">About</h4>
136 |                     <div class="ui inverted link list">
137 |                         <a href="#" class="item">Sitemap</a>
138 |                         <a href="#" class="item">Contact Us</a>
139 |                         <a href="#" class="item">Religious Ceremonies</a>
140 |                         <a href="#" class="item">Gazebo Plans</a>
141 |                     </div>
142 |                 </div>
143 |                 <div class="three wide column">
144 |                     <h4 class="ui inverted header">Services</h4>
145 |                     <div class="ui inverted link list">
146 |                         <a href="#" class="item">Banana Pre-Order</a>
147 |                         <a href="#" class="item">DNA FAQ</a>
148 |                         <a href="#" class="item">How To Access</a>
149 |                         <a href="#" class="item">Favorite X-Men</a>
150 |                     </div>
151 |                 </div>
152 |                 <div class="seven wide column">
153 |                     <h4 class="ui inverted header">Footer Header</h4>
154 |                     <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
155 |                 </div>
156 |             </div>
157 |         </div>
158 |     </div>
159 | </div>
160 | <script src="{{mix('js/app.js')}}"></script>
161 | </body>
162 | </html>
163 | 


--------------------------------------------------------------------------------