Vuejs-Strong together 0.1.0: Strong Together WebSemanticsStrong Together - 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) by WebSemantics

icon
Latest Release: 0.1.0
                                .   
                                  `:.          ':.
                                    `:.         ':.
                                     ,::         ::
                                     ;:'          :
                             .:'    ;:'            '               
                            .:'    :'        /|     
           _____________    ::    /     ___/  |     
           \  _____\\\\  \   :        /  /  __|_____
            \ \     \\\\  \   `      / /           /
             \ \     \\\\  \        //______     /  
              \ \     \\\\  \      /  ///|     /       _________
               \ \     \\\\  \    /  ////|   /         \  _____ \
                \ \     \\\\  \  /  //// | /            \ \    \ \
                 \ \_____\\\\  \/  ////__________________\ \____\ \     
                  \_______\\\\    ////____________________\ \______\      
                           \\\\  ////                      \ \
                            \\\\////________________________\ \
                             \\\///____________________________\
           ____ ___ ____ ____ _  _ ____    ___ ____ ____ ____ ___ _  _ ____ ____
           [__   |  |__/ |  | |\ | | __     |  |  | | __ |___  |  |__| |___ |__/
           ___]  |  |  \ |__| | \| |__]     |  |__| |__] |___  |  |  | |___ |  \

js-standard-style Build Status

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.

Demo   Submit Issue

Install

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

# install dependencies
npm install

Build

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

# compile resources
npm run build

Development

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

# compile resources when changes made
npm run watch

Deploy

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

# ship to gh-pages
npm run deploy

Semantic-ui

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.

Example,

/* 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,

strong-together/resources/assets/less/semantic/site/elements/button.variables

Or the element styles directly,

strong-together/resources/assets/less/semantic/site/elements/button.overrides

Screenshot

image

Credits

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

Comments

  • fix
    fix "npm run build" error - install missing packages: gitter, larder and etc. lock package version. add laravel-elixir-browserify-official

    Aug 18, 2017

    This pull request addresses the github issue #2

    previous:

    .../laravel-elixir-vueify/index.js:3
    Elixir.ready(() => {
           ^
    
    TypeError: Elixir.ready is not a function
    
        at Object.<anonymous> (.../laravel-elixir-vueify/index.js:3:8)
        at Module._compile (module.js:573:32)
        at Object.Module._extensions..js (module.js:582:10)
        at Module.load (module.js:490:32)
        at tryModuleLoad (module.js:449:12)
        at Function.Module._load (module.js:441:3)
        at Module.require (module.js:500:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (.../gulpfile.js:4:14)
        at Module._compile (module.js:573:32)
    

    current (with the change in this PR):

    | => gulp
    [23:11:07] Using gulpfile ~/Documents/node/strong-together-tmp/gulpfile.js
    [23:11:07] Starting 'all'...
    [23:11:07] Starting 'scripts'...
    [23:11:07] Finished 'scripts' after 86 ms
    [23:11:07] Starting 'less'...
    [23:11:13] Finished 'less' after 6.4 s
    [23:11:13] Starting 'browserify'...
    [23:11:17] Finished 'browserify' after 3.69 s
    [23:11:17] Starting 'copy'...
    [23:11:17] Finished 'copy' after 8.48 ms
    [23:11:17] Starting 'copy'...
    [23:11:17] Finished 'copy' after 25 ms
    [23:11:17] Starting 'copy'...
    [23:11:17] Finished 'copy' after 119 ms
    [23:11:17] Starting 'copy'...
    [23:11:17] Finished 'copy' after 16 ms
    [23:11:17] Starting 'styles'...
    [23:11:17] Finished 'styles' after 9.07 ms
    [23:11:17] Finished 'all' after 10 s
    [23:11:17] Starting 'default'...
    ┌──────────────────┬──────────────────────────┬───────────────────────────────────────────────────────────────────┬────────────────────────┐
    │ Task             │ Summary                  │ Source Files                                                      │ Destination            │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.scripts()    │ 1. Concatenating Files   │ node_modules/jquery/dist/jquery.js                                │ public/js/all.js       │
    │                  │ 2. Saving to Destination │ node_modules/semantic-ui-less/definitions/behaviors/visibility.js │                        │
    │                  │                          │ node_modules/semantic-ui-less/definitions/modules/sidebar.js      │                        │
    │                  │                          │ node_modules/semantic-ui-less/definitions/modules/transition.js   │                        │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.less()       │ 1. Compiling Less        │ resources/assets/less/app.less                                    │ public/css/app.css     │
    │                  │ 2. Autoprefixing CSS     │                                                                   │                        │
    │                  │ 3. Concatenating Files   │                                                                   │                        │
    │                  │ 4. Saving to Destination │                                                                   │                        │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.browserify() │                          │ resources/assets/js/app.js                                        │ public/js/app.js       │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.copy()       │ 1. Saving to Destination │ resources/assets/views/index.html                                 │ public/index.html      │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.copy()       │ 1. Saving to Destination │ resources/assets/img/**/*                                         │ public/img             │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.copy()       │ 1. Saving to Destination │ resources/assets/fonts/**/*                                       │ public/fonts/roboto    │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.copy()       │ 1. Saving to Destination │ node_modules/semantic-ui-less/themes/default/assets/fonts/**/*    │ public/fonts/semantic  │
    ├──────────────────┼──────────────────────────┼───────────────────────────────────────────────────────────────────┼────────────────────────┤
    │ mix.styles()     │ 1. Concatenating Files   │ resources/assets/css/**/*.css                                     │ public/css/vendors.css │
    │                  │ 2. Saving to Destination │                                                                   │                        │
    └──────────────────┴──────────────────────────┴───────────────────────────────────────────────────────────────────┴────────────────────────┘
    [23:11:17] Finished 'default' after 14 ms
    
    Reply
  • Live Reload
    Live Reload

    Jul 27, 2016

    Hi I'm really beginner for these stuff and trying to learn it.

    I would like to ask how can I make fast development?

    Everytime I change any line of code I have to "npm run build".

    What do you suggest me for it?

    Reply
  • npm run build error:
    npm run build error: "Elixir.ready is not a function"

    Jun 15, 2017

    npm install returns

    Create semantic-ui theme config file @ node_modules/semantic-ui-less/theme.config
    All done
    

    however, npm run build returns

    .../laravel-elixir-vueify/index.js:3
    Elixir.ready(() => {
           ^
    
    TypeError: Elixir.ready is not a function
    
        at Object.<anonymous> (.../laravel-elixir-vueify/index.js:3:8)
        at Module._compile (module.js:573:32)
        at Object.Module._extensions..js (module.js:582:10)
        at Module.load (module.js:490:32)
        at tryModuleLoad (module.js:449:12)
        at Function.Module._load (module.js:441:3)
        at Module.require (module.js:500:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (.../gulpfile.js:4:14)
        at Module._compile (module.js:573:32)
    
    Reply