Strong Together: A Simple and Scalable Vue.js Starter Project

A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects; based on Browserify and Semantic-ui.


Clone this repo and install all Node.js packages, and configure Semantic-ui for the project.

# install dependencies
npm install


The build process will populate the public folder with javascript and css files.

# compile resources
npm run build


To support development run watch script to build when changes are made inside resources folder.

# compile resources when changes made
npm run watch


This command will deploy this project to gh-pages if .travis.yml is setup.

# ship to gh-pages
npm run deploy


This project has been setup to work with Semantic-ui out-of-the-box. All the files required to modify the framework styles are located at resources/assets/less/semantic folder.

Change Theme

To change current Semantic-ui theme edit resources/assets/less/semantic/theme.config and modify per element.


/* Elements */
@button     : 'github';
@container  : 'default';
@divider    : 'default';
@flag       : 'default';
@header     : 'default';
@icon       : 'default';
@image      : 'default';
@input      : 'github';

The above example changes the theme for the button and input elements from default to the github theme. Run gulp to build the project and view the changes.

Override Styles

To override the default Semantic-ui styles, find the target elements files here, resources/assets/less/semantic/site.

There are two files to control any Semantic-ui element styles for the currently selected theme ('default', 'github' etc). For Button element, we can either override the element less variables,


Or the element styles directly,





This project was inspired by aspects of Browserify Vue-cli Template and Vue.js Starter Website.

Demo   Submit Issue

Download details:

Author: websemantics

License: MIT license

#vue #vuejs 

Strong Together: A Simple and Scalable Vue.js Starter Project
1.15 GEEK