How to Build a Navigation Tab with Vue.js With Redux

Navigation Tab with both plain VUE and Vue + Redux

A Vue.js project

Vue jsx

https://github.com/vuejs/babel-plugin-transform-vue-jsx

Redux Vue

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

# 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.

.babelrc

{
  "presets": [
    "es2015",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-vue-jsx"
  ],
  "comments": false,
  "env": {
    "test": {
      "plugins": [
        "istanbul"
      ]
    }
  }
}

.eslintignore

build/*.js
config/*.js

.eslintrc.js

module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module'
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        'html'
    ],
    // add your custom rules here
    'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
};

.gitignore

node_modules
.idea

Download details:

Author: ShuvoHabib
Source: https://github.com/ShuvoHabib/Vue-JSX-and-Vue-Redux-Navigation-Tab

#vue #vuejs #javascript #redux