Vue 2 Starter

This starter was created as a starting template for a Vue.js 2 frontend application built with TypeScript.

Features

• TypeScript - For type safety and other awesome features not native to vanilla JavaScript.
• SASS - CSS extension language for CSS nesting, mixins, variables, modules and inheritance.
• BEM Methodology - Methodology for naming and organizing CSS selectors and HTML elements.
• Vuex - Vue.js library for state management.

Roadmap

• Unit tests with mocha, chai & sinon
• Continuous integration with TravisCI
• Coverage reports with Istanbul & Coveralls
• Add SCSS files with 7-1 architecture pattern
• Add basic layout for the app(header,footer,wrapper)
• Add components for auth pages(login,register,forgot/reset password)
• Add store for state management and cookies
• Add basic configuration for PWA
• Containerized setup with docker-compose

Environment Variables

To begin using the starter project, first copy the example variables into a .env.[mode].local file with command: cp .env.example .env.[mode].local. The modes available are documented here. You will then need to modify the following environment variables in the .env.[mode].local file for your frontend to run:

• VUE_APP_NAME - Name of the application

• VUE_APP_URI - URI for the application

• VUE_APP_API_URI - URI for the REST API

Run Locally

Clone the project

  git clone https://github.com/peterkitonga/vuetwstarter

Go to the project directory

  cd vuetwstarter

Install dependencies

  npm install

Start the server

  npm run serve

Deployment

Install dependencies first

  npm install

To deploy this project run

  npm run build

Running Tests

Tests are written in Mocha, Chai under the tests directory and uses istanbul for coverage reports. To run tests, run the following command

  npm run test:unit

To run and view coverage reports for the tests, you will need to run two scripts in sequential order

  npm run test:coverage ; npm run test:view

Linting

Linting is configured with eslint and prettier. You are free to configure it to your liking using the configuration file .eslintrc.js.

To check for and fix linting errors, run

  npm run lint

Further Customization

See configuration reference here for further customization

Authors

Peter Kitonga