Vulma

An opinionated starter code based on Vue [JS] - Bulma [CSS] - Webpack [Bundler]

Why use Vulma

Vulma is created in order to shorten start up time for new projects. Typically most single page applications do the same functionality where they consume a REST API, manipulate and render data. Vulma tries to optimize the process for developers so they can dive straight in and write application specific code.

Application structure

Vulma uses Vuejs webpack template and an opinionated folder structure on top of it.

+-- api
|   +-- axios  -- axios request interceptor
+-- assets
|   +-- img  -  static images
|   +-- scss  - sass files 
+-- components
|   +-- moduleA  - components for 'moduleA'
|   +-- utils    - shared components 
+-- directives 
+-- layout
|   +-- pages   - where top level page component lies
|   +-- base 
|   +-- header 
|   +-- footer
+-- plugins
+-- router
+-- store
|   +-- modules 
|   +-- |   +-- consumeRest   // example for consuming rest api
|   +-- |   +-- translation   // handle translations
|   +-- index combines all modules and export store obj

Included

• Core
  • vuex
  • vue-router
  • vue-local-storage
  • vue-i18n
  • vuex-rest-api
• Plugins
  • vue-awesome
  • vue-carousel
  • favicons-webpack-plugin
  • vue-social-sharing
  • vue-google-maps
  • vue-time-ago
  • vue2-filters
  • vue-paginate
  • vue-analytics
  • vue-multiselect
• Directives
  • vue-scrollto
  • background
• Components
  • Application loading
  • Loading
  • Page Header

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

###Todo:

• Authentication
• Animations
• Validation
• SEO
• Dropzone File upload
• Breadcrumbs
• Bugsnag