├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── vvb.PNG
    ├── components
    │   ├── HiVvb.vue
    │   ├── vue
    │   │   ├── component
    │   │   │   ├── ComponentChildren.vue
    │   │   │   └── ComponentMain.vue
    │   │   ├── directives
    │   │   │   ├── TheDirective.vue
    │   │   │   ├── v-bind.vue
    │   │   │   ├── v-conditions.vue
    │   │   │   ├── v-for.vue
    │   │   │   ├── v-html.vue
    │   │   │   ├── v-model.vue
    │   │   │   ├── v-on.vue
    │   │   │   ├── v-show.vue
    │   │   │   └── v-text.vue
    │   │   ├── filter
    │   │   │   └── VueFilters.vue
    │   │   ├── mixins
    │   │   │   └── vMixins.vue
    │   │   ├── multi-select
    │   │   │   └── SelectFor.vue
    │   │   ├── prop
    │   │   │   ├── PropChild.vue
    │   │   │   ├── PropMain.vue
    │   │   │   └── emit
    │   │   │   │   ├── PropChild.vue
    │   │   │   │   └── PropMain.vue
    │   │   └── vue-jquery
    │   │   │   └── VueJquery.vue
    │   └── vuex
    │   │   ├── VuexGetters.vue
    │   │   ├── VuexMutations.vue
    │   │   └── VuexState.vue
    ├── main.js
    ├── mixins
    │   └── vueMixin.js
    ├── router
    │   └── index.js
    └── store
    │   ├── actions.js
    │   ├── getters.js
    │   ├── index.js
    │   ├── mutations.js
    │   └── state.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   'rules': {
20 |     // allow paren-less arrow functions
21 |     'arrow-parens': 0,
22 |     // allow async-await
23 |     'generator-star-spacing': 0,
24 |     // allow debugger during development
25 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-vuex-boss (VVB)
 2 | VVB is a mini Vue boilerplate .
 3 | 
 4 | <p align="center" ><img src="https://github.com/code4mk/vue-vuex-boss/raw/1.0.1/src/assets/vvb.PNG"></p>
 5 | 
 6 | # Main Feature:
 7 | 
 8 |  - Vue
 9 |  - Vuex
10 |  - Router
11 |  - Axios
12 |  - Bulma
13 |  - JQuery Addon
14 | 
15 | # How use VVB
16 | 
17 |  * `Clone VVB project`
18 |  * `npm install`
19 |  * `npm run dev`
20 | 
21 | # Our Vue Atom Packages:
22 |  - `apm install atom-vue`
23 |  - `apm install atom-vuex`
24 |  - `apm install atom-vue-router`
25 |  - `apm install atom-axios`
26 | 
27 | 
28 | Powered By : [@code4mk](https://twitter.com/code4mk) & [Hello Laravel](https://hellolaravel.org)
29 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, function (err, stats) {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false,
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | function exec (cmd) {
 7 |   return require('child_process').execSync(cmd).toString().trim()
 8 | }
 9 | 
10 | const versionRequirements = [
11 |   {
12 |     name: 'node',
13 |     currentVersion: semver.clean(process.version),
14 |     versionRequirement: packageConfig.engines.node
15 |   }
16 | ]
17 | 
18 | if (shell.which('npm')) {
19 |   versionRequirements.push({
20 |     name: 'npm',
21 |     currentVersion: exec('npm --version'),
22 |     versionRequirement: packageConfig.engines.npm
23 |   })
24 | }
25 | 
26 | module.exports = function () {
27 |   const warnings = []
28 |   for (let i = 0; i < versionRequirements.length; i++) {
29 |     const mod = versionRequirements[i]
30 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
31 |       warnings.push(mod.name + ': ' +
32 |         chalk.red(mod.currentVersion) + ' should be ' +
33 |         chalk.green(mod.versionRequirement)
34 |       )
35 |     }
36 |   }
37 | 
38 |   if (warnings.length) {
39 |     console.log('')
40 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
41 |     console.log()
42 |     for (let i = 0; i < warnings.length; i++) {
43 |       const warning = warnings[i]
44 |       console.log('  ' + warning)
45 |     }
46 |     console.log()
47 |     process.exit(1)
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 'use strict'
 3 | require('eventsource-polyfill')
 4 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 5 | 
 6 | hotClient.subscribe(function (event) {
 7 |   if (event.action === 'reload') {
 8 |     window.location.reload()
 9 |   }
10 | })
11 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | require('./check-versions')()
  3 | 
  4 | const config = require('../config')
  5 | if (!process.env.NODE_ENV) {
  6 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  7 | }
  8 | 
  9 | const opn = require('opn')
 10 | const path = require('path')
 11 | const express = require('express')
 12 | const webpack = require('webpack')
 13 | const proxyMiddleware = require('http-proxy-middleware')
 14 | const webpackConfig = require('./webpack.dev.conf')
 15 | 
 16 | // default port where dev server listens for incoming traffic
 17 | const port = process.env.PORT || config.dev.port
 18 | // automatically open browser, if not set will be false
 19 | const autoOpenBrowser = !!config.dev.autoOpenBrowser
 20 | // Define HTTP proxies to your custom API backend
 21 | // https://github.com/chimurai/http-proxy-middleware
 22 | const proxyTable = config.dev.proxyTable
 23 | 
 24 | const app = express()
 25 | const compiler = webpack(webpackConfig)
 26 | 
 27 | const devMiddleware = require('webpack-dev-middleware')(compiler, {
 28 |   publicPath: webpackConfig.output.publicPath,
 29 |   quiet: true
 30 | })
 31 | 
 32 | const hotMiddleware = require('webpack-hot-middleware')(compiler, {
 33 |   log: false,
 34 |   heartbeat: 2000
 35 | })
 36 | // force page reload when html-webpack-plugin template changes
 37 | // currently disabled until this is resolved:
 38 | // https://github.com/jantimon/html-webpack-plugin/issues/680
 39 | // compiler.plugin('compilation', function (compilation) {
 40 | //   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
 41 | //     hotMiddleware.publish({ action: 'reload' })
 42 | //     cb()
 43 | //   })
 44 | // })
 45 | 
 46 | // enable hot-reload and state-preserving
 47 | // compilation error display
 48 | app.use(hotMiddleware)
 49 | 
 50 | // proxy api requests
 51 | Object.keys(proxyTable).forEach(function (context) {
 52 |   let options = proxyTable[context]
 53 |   if (typeof options === 'string') {
 54 |     options = { target: options }
 55 |   }
 56 |   app.use(proxyMiddleware(options.filter || context, options))
 57 | })
 58 | 
 59 | // handle fallback for HTML5 history API
 60 | app.use(require('connect-history-api-fallback')())
 61 | 
 62 | // serve webpack bundle output
 63 | app.use(devMiddleware)
 64 | 
 65 | // serve pure static assets
 66 | const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 67 | app.use(staticPath, express.static('./static'))
 68 | 
 69 | const uri = 'http://localhost:' + port
 70 | 
 71 | var _resolve
 72 | var _reject
 73 | var readyPromise = new Promise((resolve, reject) => {
 74 |   _resolve = resolve
 75 |   _reject = reject
 76 | })
 77 | 
 78 | var server
 79 | var portfinder = require('portfinder')
 80 | portfinder.basePort = port
 81 | 
 82 | console.log('> Starting dev server...')
 83 | devMiddleware.waitUntilValid(() => {
 84 |   portfinder.getPort((err, port) => {
 85 |     if (err) {
 86 |       _reject(err)
 87 |     }
 88 |     process.env.PORT = port
 89 |     var uri = 'http://localhost:' + port
 90 |     console.log('> Listening at ' + uri + '\n')
 91 |     // when env is testing, don't need open it
 92 |     if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
 93 |       opn(uri)
 94 |     }
 95 |     server = app.listen(port)
 96 |     _resolve()
 97 |   })
 98 | })
 99 | 
100 | module.exports = {
101 |   ready: readyPromise,
102 |   close: () => {
103 |     server.close()
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const config = require('../config')
 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 5 | 
 6 | exports.assetsPath = function (_path) {
 7 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
 8 |     ? config.build.assetsSubDirectory
 9 |     : config.dev.assetsSubDirectory
10 |   return path.posix.join(assetsSubDirectory, _path)
11 | }
12 | 
13 | exports.cssLoaders = function (options) {
14 |   options = options || {}
15 | 
16 |   const cssLoader = {
17 |     loader: 'css-loader',
18 |     options: {
19 |       minimize: process.env.NODE_ENV === 'production',
20 |       sourceMap: options.sourceMap
21 |     }
22 |   }
23 | 
24 |   // generate loader string to be used with extract text plugin
25 |   function generateLoaders (loader, loaderOptions) {
26 |     const loaders = [cssLoader]
27 |     if (loader) {
28 |       loaders.push({
29 |         loader: loader + '-loader',
30 |         options: Object.assign({}, loaderOptions, {
31 |           sourceMap: options.sourceMap
32 |         })
33 |       })
34 |     }
35 | 
36 |     // Extract CSS when that option is specified
37 |     // (which is the case during production build)
38 |     if (options.extract) {
39 |       return ExtractTextPlugin.extract({
40 |         use: loaders,
41 |         fallback: 'vue-style-loader'
42 |       })
43 |     } else {
44 |       return ['vue-style-loader'].concat(loaders)
45 |     }
46 |   }
47 | 
48 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
49 |   return {
50 |     css: generateLoaders(),
51 |     postcss: generateLoaders(),
52 |     less: generateLoaders('less'),
53 |     sass: generateLoaders('sass', { indentedSyntax: true }),
54 |     scss: generateLoaders('sass'),
55 |     stylus: generateLoaders('stylus'),
56 |     styl: generateLoaders('stylus')
57 |   }
58 | }
59 | 
60 | // Generate loaders for standalone style files (outside of .vue)
61 | exports.styleLoaders = function (options) {
62 |   const output = []
63 |   const loaders = exports.cssLoaders(options)
64 |   for (const extension in loaders) {
65 |     const loader = loaders[extension]
66 |     output.push({
67 |       test: new RegExp('\\.' + extension + '$'),
68 |       use: loader
69 |     })
70 |   }
71 |   return output
72 | }
73 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | 
 6 | module.exports = {
 7 |   loaders: utils.cssLoaders({
 8 |     sourceMap: isProduction
 9 |       ? config.build.productionSourceMap
10 |       : config.dev.cssSourceMap,
11 |     extract: isProduction
12 |   }),
13 |   transformToRequire: {
14 |     video: 'src',
15 |     source: 'src',
16 |     img: 'src',
17 |     image: 'xlink:href'
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | module.exports = {
12 |   entry: {
13 |     app: './src/main.js'
14 |   },
15 |   output: {
16 |     path: config.build.assetsRoot,
17 |     filename: '[name].js',
18 |     publicPath: process.env.NODE_ENV === 'production'
19 |       ? config.build.assetsPublicPath
20 |       : config.dev.assetsPublicPath
21 |   },
22 |   resolve: {
23 |     extensions: ['.js', '.vue', '.json'],
24 |     alias: {
25 |       'vue$': 'vue/dist/vue.esm.js',
26 |       '@': resolve('src'),
27 |     }
28 |   },
29 |   module: {
30 |     rules: [
31 |       {
32 |         test: /\.(js|vue)$/,
33 |         loader: 'eslint-loader',
34 |         enforce: 'pre',
35 |         include: [resolve('src'), resolve('test')],
36 |         options: {
37 |           formatter: require('eslint-friendly-formatter')
38 |         }
39 |       },
40 |       {
41 |         test: /\.vue$/,
42 |         loader: 'vue-loader',
43 |         options: vueLoaderConfig
44 |       },
45 |       {
46 |         test: /\.js$/,
47 |         loader: 'babel-loader',
48 |         include: [resolve('src'), resolve('test')]
49 |       },
50 |       {
51 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
52 |         loader: 'url-loader',
53 |         options: {
54 |           limit: 10000,
55 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
56 |         }
57 |       },
58 |       {
59 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
60 |         loader: 'url-loader',
61 |         options: {
62 |           limit: 10000,
63 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
64 |         }
65 |       },
66 |       {
67 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
68 |         loader: 'url-loader',
69 |         options: {
70 |           limit: 10000,
71 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
72 |         }
73 |       }
74 |     ]
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const baseWebpackConfig = require('./webpack.base.conf')
 7 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 9 | 
10 | // add hot-reload related code to entry chunks
11 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
12 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
13 | })
14 | 
15 | module.exports = merge(baseWebpackConfig, {
16 |   module: {
17 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
18 |   },
19 |   // cheap-module-eval-source-map is faster for development
20 |   devtool: '#cheap-module-eval-source-map',
21 |   plugins: [
22 |     new webpack.DefinePlugin({
23 |       'process.env': config.dev.env
24 |     }),
25 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
26 |     new webpack.HotModuleReplacementPlugin(),
27 |     new webpack.NoEmitOnErrorsPlugin(),
28 |     // https://github.com/ampedandwired/html-webpack-plugin
29 |     new HtmlWebpackPlugin({
30 |       filename: 'index.html',
31 |       template: 'index.html',
32 |       inject: true
33 |     }),
34 |     new FriendlyErrorsPlugin()
35 |   ]
36 | })
37 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | 
 13 | const env = config.build.env
 14 | 
 15 | const webpackConfig = merge(baseWebpackConfig, {
 16 |   module: {
 17 |     rules: utils.styleLoaders({
 18 |       sourceMap: config.build.productionSourceMap,
 19 |       extract: true
 20 |     })
 21 |   },
 22 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 23 |   output: {
 24 |     path: config.build.assetsRoot,
 25 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 26 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 27 |   },
 28 |   plugins: [
 29 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 30 |     new webpack.DefinePlugin({
 31 |       'process.env': env
 32 |     }),
 33 |     // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
 34 |     new webpack.optimize.UglifyJsPlugin({
 35 |       compress: {
 36 |         warnings: false
 37 |       },
 38 |       sourceMap: true
 39 |     }),
 40 |     // extract css into its own file
 41 |     new ExtractTextPlugin({
 42 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 43 |     }),
 44 |     // Compress extracted CSS. We are using this plugin so that possible
 45 |     // duplicated CSS from different components can be deduped.
 46 |     new OptimizeCSSPlugin({
 47 |       cssProcessorOptions: {
 48 |         safe: true
 49 |       }
 50 |     }),
 51 |     // generate dist index.html with correct asset hash for caching.
 52 |     // you can customize output by editing /index.html
 53 |     // see https://github.com/ampedandwired/html-webpack-plugin
 54 |     new HtmlWebpackPlugin({
 55 |       filename: config.build.index,
 56 |       template: 'index.html',
 57 |       inject: true,
 58 |       minify: {
 59 |         removeComments: true,
 60 |         collapseWhitespace: true,
 61 |         removeAttributeQuotes: true
 62 |         // more options:
 63 |         // https://github.com/kangax/html-minifier#options-quick-reference
 64 |       },
 65 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 66 |       chunksSortMode: 'dependency'
 67 |     }),
 68 |     // keep module.id stable when vender modules does not change
 69 |     new webpack.HashedModuleIdsPlugin(),
 70 |     // split vendor js into its own file
 71 |     new webpack.optimize.CommonsChunkPlugin({
 72 |       name: 'vendor',
 73 |       minChunks: function (module) {
 74 |         // any required modules inside node_modules are extracted to vendor
 75 |         return (
 76 |           module.resource &&
 77 |           /\.js$/.test(module.resource) &&
 78 |           module.resource.indexOf(
 79 |             path.join(__dirname, '../node_modules')
 80 |           ) === 0
 81 |         )
 82 |       }
 83 |     }),
 84 |     // extract webpack runtime and module manifest to its own file in order to
 85 |     // prevent vendor hash from being updated whenever app bundle is updated
 86 |     new webpack.optimize.CommonsChunkPlugin({
 87 |       name: 'manifest',
 88 |       chunks: ['vendor']
 89 |     }),
 90 |     // copy custom static assets
 91 |     new CopyWebpackPlugin([
 92 |       {
 93 |         from: path.resolve(__dirname, '../static'),
 94 |         to: config.build.assetsSubDirectory,
 95 |         ignore: ['.*']
 96 |       }
 97 |     ])
 98 |   ]
 99 | })
100 | 
101 | if (config.build.productionGzip) {
102 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
103 | 
104 |   webpackConfig.plugins.push(
105 |     new CompressionWebpackPlugin({
106 |       asset: '[path].gz[query]',
107 |       algorithm: 'gzip',
108 |       test: new RegExp(
109 |         '\\.(' +
110 |         config.build.productionGzipExtensions.join('|') +
111 |         ')$'
112 |       ),
113 |       threshold: 10240,
114 |       minRatio: 0.8
115 |     })
116 |   )
117 | }
118 | 
119 | if (config.build.bundleAnalyzerReport) {
120 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
121 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
122 | }
123 | 
124 | module.exports = webpackConfig
125 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 'use strict'
 3 | // Template version: 1.1.3
 4 | // see http://vuejs-templates.github.io/webpack for documentation.
 5 | 
 6 | const path = require('path')
 7 | 
 8 | module.exports = {
 9 |   build: {
10 |     env: require('./prod.env'),
11 |     index: path.resolve(__dirname, '../dist/index.html'),
12 |     assetsRoot: path.resolve(__dirname, '../dist'),
13 |     assetsSubDirectory: 'static',
14 |     assetsPublicPath: '/',
15 |     productionSourceMap: true,
16 |     // Gzip off by default as many popular static hosts such as
17 |     // Surge or Netlify already gzip all static assets for you.
18 |     // Before setting to `true`, make sure to:
19 |     // npm install --save-dev compression-webpack-plugin
20 |     productionGzip: false,
21 |     productionGzipExtensions: ['js', 'css'],
22 |     // Run the build command with an extra argument to
23 |     // View the bundle analyzer report after build finishes:
24 |     // `npm run build --report`
25 |     // Set to `true` or `false` to always turn it on or off
26 |     bundleAnalyzerReport: process.env.npm_config_report
27 |   },
28 |   dev: {
29 |     env: require('./dev.env'),
30 |     port: process.env.PORT || 8080,
31 |     autoOpenBrowser: true,
32 |     assetsSubDirectory: 'static',
33 |     assetsPublicPath: '/',
34 |     proxyTable: {},
35 |     // CSS Sourcemaps off by default because relative paths are "buggy"
36 |     // with this option, according to the CSS-Loader README
37 |     // (https://github.com/webpack/css-loader#sourcemaps)
38 |     // In our experience, they generally work as expected,
39 |     // just be aware of this issue when enabling this option.
40 |     cssSourceMap: false
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-vuex-lovers</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files will be auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-vuex-lovers",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Mostafa Kamal <radionishi@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js",
11 |     "lint": "eslint --ext .js,.vue src"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.16.2",
15 |     "bulma": "^0.6.0",
16 |     "font-awesome": "^4.7.0",
17 |     "jquery": "^3.2.1",
18 |     "vue": "^2.5.2",
19 |     "vue-router": "^3.0.1",
20 |     "vuex": "^3.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^7.1.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-eslint": "^7.1.1",
26 |     "babel-loader": "^7.1.2",
27 |     "babel-plugin-transform-runtime": "^6.23.0",
28 |     "babel-preset-env": "^1.6.1",
29 |     "babel-preset-es2015": "^6.24.1",
30 |     "babel-preset-stage-2": "^6.24.1",
31 |     "babel-register": "^6.22.0",
32 |     "chalk": "^2.0.1",
33 |     "connect-history-api-fallback": "^1.3.0",
34 |     "copy-webpack-plugin": "^4.0.1",
35 |     "css-loader": "^0.28.0",
36 |     "eslint": "^3.19.0",
37 |     "eslint-config-standard": "^10.2.1",
38 |     "eslint-friendly-formatter": "^3.0.0",
39 |     "eslint-loader": "^1.7.1",
40 |     "eslint-plugin-html": "^3.0.0",
41 |     "eslint-plugin-import": "^2.7.0",
42 |     "eslint-plugin-node": "^5.2.0",
43 |     "eslint-plugin-promise": "^3.4.0",
44 |     "eslint-plugin-standard": "^3.0.1",
45 |     "eventsource-polyfill": "^0.9.6",
46 |     "express": "^4.14.1",
47 |     "extract-text-webpack-plugin": "^3.0.0",
48 |     "file-loader": "^1.1.4",
49 |     "friendly-errors-webpack-plugin": "^1.6.1",
50 |     "html-webpack-plugin": "^2.30.1",
51 |     "http-proxy-middleware": "^0.17.3",
52 |     "opn": "^5.1.0",
53 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
54 |     "ora": "^1.2.0",
55 |     "portfinder": "^1.0.13",
56 |     "rimraf": "^2.6.0",
57 |     "semver": "^5.3.0",
58 |     "shelljs": "^0.7.6",
59 |     "url-loader": "^0.5.8",
60 |     "vue-loader": "^13.3.0",
61 |     "vue-style-loader": "^3.0.1",
62 |     "vue-template-compiler": "^2.5.2",
63 |     "webpack": "^3.6.0",
64 |     "webpack-bundle-analyzer": "^2.9.0",
65 |     "webpack-dev-middleware": "^1.12.0",
66 |     "webpack-hot-middleware": "^2.18.2",
67 |     "webpack-merge": "^4.1.0"
68 |   },
69 |   "engines": {
70 |     "node": ">= 4.0.0",
71 |     "npm": ">= 3.0.0"
72 |   },
73 |   "browserslist": [
74 |     "> 1%",
75 |     "last 2 versions",
76 |     "not ie <= 8"
77 |   ]
78 | }
79 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <nav class="navbar is-info">
  4 |     <div class="navbar-brand">
  5 |       <a class="navbar-item" href="/">
  6 |         <!-- <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"> -->
  7 |         <strong>Vue-VueX-Boss</strong>
  8 |       </a>
  9 | 
 10 |       <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
 11 |         <span class="icon" style="color: #333;">
 12 |           <i class="fa fa-lg fa-github"></i>
 13 |         </span>
 14 |       </a>
 15 | 
 16 |       <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
 17 |         <span class="icon" style="color: #55acee;">
 18 |           <i class="fa fa-lg fa-twitter"></i>
 19 |         </span>
 20 |       </a>
 21 | 
 22 |       <div class="navbar-burger burger" data-target="navMenuTransparentExample">
 23 |         <span></span>
 24 |         <span></span>
 25 |         <span></span>
 26 |       </div>
 27 |     </div>
 28 | 
 29 |     <div id="navMenuTransparentExample" class="navbar-menu">
 30 |       <div class="navbar-start">
 31 |         <div class="navbar-item has-dropdown is-hoverable">
 32 |           <router-link :to="{ name: 'VxState', params: {} }" class="navbar-link ">Vuex</router-link>
 33 |           <div id="blogDropdown" class="navbar-dropdown is-boxed" data-style="width: 18rem;">
 34 | 
 35 |               <a class="navbar-item" href="vx-state">
 36 |                 state
 37 |               </a>
 38 | 
 39 |               <a class="navbar-item" href="/vx-getters">
 40 |                 getters
 41 |               </a>
 42 | 
 43 |               <a class="navbar-item" href="/vx-mutations">
 44 |                 mutations
 45 |               </a>
 46 | 
 47 |             <a class="navbar-item" href="/actions">
 48 |               actions
 49 |             </a>
 50 |             <hr class="navbar-divider">
 51 |           </div>
 52 |         </div>
 53 |         <div class="navbar-item has-dropdown is-hoverable">
 54 |           <router-link :to="{ name: 'VxJquery', params: {} }" class="navbar-link ">More</router-link>
 55 |           <div id="moreDropdown" class="navbar-dropdown is-boxed">
 56 |             <a class="navbar-item " href="/vx-jquery">
 57 |               <p>
 58 |                 <strong>vue+jquery</strong>
 59 |               </p>
 60 |             </a>
 61 |             <a class="navbar-item " href="/v-multi-select">
 62 |               <p>
 63 |                 <strong>Multi Select For</strong>
 64 |               </p>
 65 |             </a>
 66 |             <a class="navbar-item " href="/props">
 67 |               <p>
 68 |                 <strong>props</strong>
 69 |               </p>
 70 |             </a>
 71 |             <a class="navbar-item " href="/emit">
 72 |               <p>
 73 |                 <strong>$emit</strong>
 74 |               </p>
 75 |             </a>
 76 |             <a class="navbar-item " href="#">
 77 |               <p>
 78 |                 <strong>Code4mk</strong>
 79 |               </p>
 80 |             </a>
 81 |           </div>
 82 |         </div>
 83 |         <router-link :to="{ name: 'TheDirective', params: {} }" class="navbar-link ">
 84 |           <span class="bd-emoji">⭐️</span>
 85 |           Directives
 86 |         </router-link>
 87 |         <router-link :to="{ name: 'VMixin', params: {} }" class="navbar-link ">
 88 |           <span class="bd-emoji">⭐️</span>
 89 |           Mixins
 90 |         </router-link>
 91 |       </div>
 92 | 
 93 |       <div class="navbar-end">
 94 |         <a class="navbar-item is-hidden-desktop-only" href="https://github.com/code4mk/vue-vuex-boss" target="_blank">
 95 |           <span class="icon" style="color: #333;">
 96 |             <i class="fa fa-lg fa-github"></i>
 97 |           </span>
 98 |         </a>
 99 |         <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/code4mk" target="_blank">
100 |           <span class="icon" style="color: #55acee;">
101 |             <i class="fa fa-lg fa-twitter"></i>
102 |           </span>
103 |         </a>
104 |         <div class="navbar-item">
105 |           <div class="field is-grouped">
106 |             <p class="control">
107 |               <a class="bd-tw-button button"
108 |     data-social-network="Twitter"
109 |     data-social-action="tweet"
110 |     data-social-target="http://bulma.io"
111 |     target="_blank"
112 |     href="https://twitter.com/intent/tweet?text=Vue-VueX-Boss: Vue-VueX-Boss=http://github.com/code4mk/vue-vuex-boss">
113 |     <span class="icon">
114 |       <i class="fa fa-twitter"></i>
115 |     </span>
116 |     <span>
117 |       Tweet
118 |     </span>
119 |   </a>
120 | 
121 |             </p>
122 |             <p class="control">
123 |               <a class="button is-primary" href="#">
124 |                 <span class="icon">
125 |                   <i class="fa fa-download"></i>
126 |                 </span>
127 |                 <span>Download</span>
128 |               </a>
129 |             </p>
130 |           </div>
131 |         </div>
132 |       </div>
133 |     </div>
134 |   </nav>
135 |     <router-view/>
136 |   </div>
137 | </template>
138 | 
139 | <script>
140 | export default {
141 |   name: 'app'
142 | }
143 | </script>
144 | 
145 | <style >
146 | @import "../node_modules/bulma/css/bulma.css";
147 | @import "../node_modules/font-awesome/css/font-awesome.css";
148 | .navbar{
149 |   border-top: 4px solid black;
150 | }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code4mk/vue-vuex-boss/32682c46a8b6426fde1f1d46eaa8bcfc79077a7c/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/vvb.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code4mk/vue-vuex-boss/32682c46a8b6426fde1f1d46eaa8bcfc79077a7c/src/assets/vvb.PNG


--------------------------------------------------------------------------------
/src/components/HiVvb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div class="columns">
 4 |       <div class="column is-8 is-offset-2 notification is-info">
 5 |         <section class="hero">
 6 |           <div class="hero-body">
 7 |             <div class="container">
 8 |               <h1 class="title">
 9 |                 {{ msg }}
10 |               </h1>
11 |               <h2 class="subtitle">
12 |                 {{ author }}
13 |               </h2>
14 |             </div>
15 |           </div>
16 |         </section>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'HiVvb',
25 |   data () {
26 |     return {
27 |       msg: 'Welcome to Vue-VueX-Boss',
28 |       author: '@code4mk'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <!-- Add "scoped" attribute to limit CSS to this component only -->
35 | <style lang="css" scoped>
36 | .hello{
37 |   margin-top: 120px;
38 | }
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/components/vue/component/ComponentChildren.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-8 is-offset-2">
 4 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 5 |   <thead>
 6 |     <tr>
 7 |       <th>ID</th>
 8 |       <th>Title</th>
 9 | 
10 | 
11 |     </tr>
12 |   </thead>
13 |   <tbody>
14 |     <tr v-for="post in posts">
15 |       <th>
16 |         {{ post.id }}
17 |       </th>
18 |       <th>
19 |         {{ post.title }}
20 |       </th>
21 |     </tr>
22 | 
23 |   </tbody>
24 | </table>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import axios from 'axios'
31 | export default {
32 |   name: 'VText',
33 |   data () {
34 |     return {
35 |       vText: 'This is a v-text',
36 |       posts: []
37 |     }
38 |   },
39 |   created () {
40 |     axios.get('https://jsonplaceholder.typicode.com/posts')
41 |       .then(function (response) {
42 |         this.posts = response.data
43 |       }.bind(this))
44 |       .catch(function (error) {
45 |         console.log(error)
46 |       })
47 |   }
48 | }
49 | </script>
50 | 
51 | <style lang="css" scoped >
52 | 
53 | .vvb-margin{
54 |   margin-top: 30px;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/components/vue/component/ComponentMain.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns">
 3 |     <div class="column is-6 is-offset-2">
 4 |       <div class="field">
 5 |         <label class="label">Name</label>
 6 |         <div class="control">
 7 |           <input class="input" :class="isSuccess" type="text" placeholder="Text input" v-model="vModel">
 8 |         </div>
 9 |       </div>
10 | 
11 |       <div class="field">
12 |         <label class="label">Message</label>
13 |         <div class="control">
14 |           <textarea class="textarea" :class="isSuccess" placeholder="Textarea" v-model="isSuccess"></textarea>
15 |         </div>
16 |       </div>
17 |       <child-component></child-component>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import VComponent from '@/components/vue/component/ComponentChildren'
25 | export default {
26 |   name: 'VText',
27 |   data () {
28 |     return {
29 |       vModel: 'Write something boss!',
30 |       isSuccess: 'is-danger'
31 |     }
32 |   },
33 |   components: {
34 |     'child-component': VComponent
35 |   }
36 | }
37 | </script>
38 | 
39 | <style lang="css" scoped >
40 | 
41 | .vvb-margin{
42 |   margin-top: 30px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/TheDirective.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-4 is-offset-4">
 4 |       <nav class="panel">
 5 |   <p class="panel-heading">
 6 |     {{ title }}
 7 |   </p>
 8 |   <a class="panel-block is-active" v-for="diretiveList in diretiveLists" :key="diretiveList.id" >
 9 |     <a :href="diretiveList.url" target="_blank">
10 |       <span class="panel-icon">
11 |         <i class="fa fa-book"></i>
12 |       </span>
13 |       {{ diretiveList.name }}
14 |     </a>
15 |   </a>
16 | 
17 | </nav>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'TheDirective',
25 |   data () {
26 |     return {
27 |       title: 'Directive Lists',
28 |       diretiveLists: [
29 |         {name: 'v-text', url: '/v-text'},
30 |         {name: 'v-html', url: '/v-html'},
31 |         {name: 'v-show', url: '/v-show'},
32 |         {name: 'v-pre', url: '/v-pre'},
33 |         {name: 'v-once', url: '/v-once'},
34 |         {name: 'v-cloak', url: '/v-cloak'},
35 |         {name: 'v-if', url: '/v-conditions'},
36 |         {name: 'v-else-if', url: '/v-conditions'},
37 |         {name: 'v-else', url: '/v-conditions'},
38 |         {name: 'v-model', url: '/v-model'},
39 |         {name: 'v-bind', url: '/v-bind'},
40 |         {name: 'v-on', url: '/v-on'},
41 |         {name: 'v-for', url: '/v-mefor'}
42 |       ]
43 |     }
44 |   }
45 | }
46 | </script>
47 | 
48 | <style lang="css" scoped >
49 | 
50 | .vvb-margin{
51 |   margin-top: 30px;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-bind.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns">
 3 |     <div class="column is-6 is-offset-2">
 4 |       <div class="field">
 5 |         <label class="label">Name</label>
 6 |         <div class="control">
 7 |           <input class="input" :class="isSuccess" type="text" placeholder="Text input" v-model="vModel">
 8 |         </div>
 9 |       </div>
10 | 
11 |       <div class="field">
12 |         <label class="label">Message</label>
13 |         <div class="control">
14 |           <textarea class="textarea" :class="isSuccess" placeholder="Textarea" v-model="isSuccess"></textarea>
15 |         </div>
16 |       </div>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'VText',
25 |   data () {
26 |     return {
27 |       vModel: 'Write something boss!',
28 |       isSuccess: 'is-danger'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="css" scoped >
35 | 
36 | .vvb-margin{
37 |   margin-top: 30px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-conditions.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-4 is-offset-4">
 4 |       <nav class="panel">
 5 |   <p class="panel-heading" v-if="ifStatus">
 6 |     {{ vIfText }}
 7 |   </p>
 8 |   <p class="panel-heading" v-else-if="elseIfStatus">
 9 |     {{ vElseIfText }}
10 |   </p>
11 |   <p class="panel-heading" v-else>
12 |     {{ vElseText }}
13 |   </p>
14 | </nav>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'VText',
22 |   data () {
23 |     return {
24 |       vIfText: 'This is a v-if-text',
25 |       vElseIfText: 'This is a v-else-if-text',
26 |       vElseText: 'This is a v-else-text',
27 |       ifStatus: false,
28 |       elseIfStatus: true
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <style lang="css" scoped >
35 | 
36 | .vvb-margin{
37 |   margin-top: 30px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-for.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-8 is-offset-2">
 4 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 5 |   <thead>
 6 |     <tr>
 7 |       <th>ID</th>
 8 |       <th>Title</th>
 9 |       <th>Edit</th>
10 | 
11 |     </tr>
12 |   </thead>
13 |   <tbody>
14 |     <tr v-for="post in posts">
15 |       <th>
16 |         {{ post.id }}
17 |       </th>
18 |       <th>
19 |         {{ post.title }}
20 |       </th>
21 |       <th>
22 |         <button class="button is-success">Edit</button>
23 |         <button class="button is-danger">Delete</button>
24 |       </th>
25 |     </tr>
26 | 
27 |   </tbody>
28 | </table>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | import axios from 'axios'
35 | export default {
36 |   name: 'VText',
37 |   data () {
38 |     return {
39 |       vText: 'This is a v-text',
40 |       posts: []
41 |     }
42 |   },
43 |   created () {
44 |     axios.get('https://jsonplaceholder.typicode.com/posts')
45 |       .then(function (response) {
46 |         this.posts = response.data
47 |       }.bind(this))
48 |       .catch(function (error) {
49 |         console.log(error)
50 |       })
51 |   }
52 | }
53 | </script>
54 | 
55 | <style lang="css" scoped >
56 | 
57 | .vvb-margin{
58 |   margin-top: 30px;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-html.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-4 is-offset-4">
 4 |       <nav class="panel">
 5 |   <p class="panel-heading">
 6 |     {{ vHtml }}
 7 |   </p>
 8 | </nav>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'VHtml',
16 |   data () {
17 |     return {
18 |       vHtml: '<p class="panel-heading"></p>'
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style lang="css" scoped >
25 | 
26 | .vvb-margin{
27 |   margin-top: 30px;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-model.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns">
 3 |     <div class="column is-6 is-offset-2">
 4 |       <div class="field">
 5 |         <label class="label">Name</label>
 6 |         <div class="control">
 7 |           <input class="input" type="text" placeholder="Text input" v-model="vModel">
 8 |         </div>
 9 |       </div>
10 | 
11 |       <div class="field">
12 |         <label class="label">Message</label>
13 |         <div class="control">
14 |           <textarea class="textarea" placeholder="Textarea" v-model="vModel"></textarea>
15 |         </div>
16 |       </div>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'VText',
25 |   data () {
26 |     return {
27 |       vModel: 'Write something boss!'
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style lang="css" scoped >
34 | 
35 | .vvb-margin{
36 |   margin-top: 30px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-on.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template lang="html">
 3 |   <div class="columns">
 4 |     <div class="column is-6 is-offset-2">
 5 |       <div class="field">
 6 |         <label class="label">Name</label>
 7 |         <div class="control">
 8 |           <input class="input" :class="isSuccess" type="text" placeholder="Text input">
 9 |         </div>
10 |       </div>
11 | 
12 |         <div class="field">
13 |           <label class="label">Message</label>
14 |             <div class="control">
15 |               <textarea class="textarea" :class="isSuccess" placeholder="Textarea" v-model="isSuccess"></textarea>
16 |           </div>
17 |         </div>
18 |         <div class="control">
19 |           <button class="button is-danger" :class="isLoadingDanger" @click="changeMe">danger mode</button>
20 |           <button class="button is-dark" :class="isLoadingDark" @click="changeMeDark">dark mode</button>
21 |         </div>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'VText',
30 |   data () {
31 |     return {
32 |       isSuccess: '',
33 |       isLoadingDanger: '',
34 |       isLoadingDark: ''
35 |     }
36 |   },
37 |   methods: {
38 |     changeMe () {
39 |       this.isSuccess = 'is-danger'
40 |       this.isLoadingDanger = 'is-loading'
41 |       this.isLoadingDark = ''
42 |     },
43 |     changeMeDark () {
44 |       this.isSuccess = 'is-dark is-loading'
45 |       this.isLoadingDark = 'is-loading'
46 |       this.isLoadingDanger = ''
47 |     }
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="css" scoped >
53 | 
54 | .vvb-margin{
55 |   margin-top: 30px;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-show.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-4 is-offset-4">
 4 |       <nav class="panel">
 5 |   <p class="panel-heading" v-show="vShow">
 6 |     {{ vShowText }}
 7 |   </p>
 8 | </nav>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'VText',
16 |   data () {
17 |     return {
18 |       vShowText: 'This is a v-show boss!',
19 |       vShow: true
20 |     }
21 |   }
22 | }
23 | </script>
24 | 
25 | <style lang="css" scoped >
26 | 
27 | .vvb-margin{
28 |   margin-top: 30px;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/components/vue/directives/v-text.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-4 is-offset-4">
 4 |       <nav class="panel">
 5 |   <p class="panel-heading" v-text="vText">
 6 | 
 7 |   </p>
 8 | </nav>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'VText',
16 |   data () {
17 |     return {
18 |       vText: 'This is a v-text'
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style lang="css" scoped >
25 | 
26 | .vvb-margin{
27 |   margin-top: 30px;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/components/vue/filter/VueFilters.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div class="columns">
 4 |       <div class="column is-8 is-offset-2 notification is-info">
 5 |         <section class="hero">
 6 |           <div class="hero-body">
 7 |             <div class="container">
 8 |               <h1 class="title">
 9 |                 {{ msg | toUpper }}
10 |               </h1>
11 |               <h2 class="subtitle">
12 |                 {{ author }}
13 |               </h2>
14 |             </div>
15 |           </div>
16 |         </section>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'HelloWorld',
25 |   data () {
26 |     return {
27 |       msg: 'This is Upperacse filters',
28 |       author: '@code4mk'
29 |     }
30 |   },
31 |   filters: {
32 |     toUpper: function (value) {
33 |       return value.toUpperCase()
34 |     }
35 |   }
36 | }
37 | </script>
38 | 
39 | <!-- Add "scoped" attribute to limit CSS to this component only -->
40 | <style lang="css" scoped>
41 | .hello{
42 |   margin-top: 120px;
43 | 
44 | }
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/vue/mixins/vMixins.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template lang="html">
 3 |   <div class="columns">
 4 |     <div class="column is-6 is-offset-2">
 5 |       <div class="field">
 6 |         <label class="label">Name</label>
 7 |         <div class="control">
 8 |           <input class="input" :class="isSuccess" type="text" placeholder="Text input">
 9 |         </div>
10 |       </div>
11 | 
12 |         <div class="field">
13 |           <label class="label">Message</label>
14 |             <div class="control">
15 |               <textarea class="textarea" :class="isSuccess" placeholder="Textarea" v-model="isSuccess"></textarea>
16 |           </div>
17 |         </div>
18 |         <div class="control">
19 |           <button class="button is-danger" :class="isLoadingDanger" @click="changeMe">danger mode</button>
20 |           <button class="button is-dark" :class="isLoadingDark" @click="changeMeDark">dark mode</button>
21 |         </div>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import meMixin from '@/mixins/vueMixin'
29 | export default {
30 |   name: 'VText',
31 |   data () {
32 |     return {
33 |       isSuccess: '',
34 |       isLoadingDanger: '',
35 |       isLoadingDark: ''
36 |     }
37 |   },
38 |   methods: {
39 |     // method comes from mixins/vueMixin.js
40 |   },
41 |   mixins: [meMixin]
42 | }
43 | </script>
44 | 
45 | <style lang="css" scoped >
46 | 
47 | .vvb-margin{
48 |   margin-top: 30px;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/vue/multi-select/SelectFor.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-8 is-offset-2">
 4 |       <button class="button is-success btn-gap" @click="vKamal(type.id)" v-for="type in types"   :key="type.id">{{type.id}} - {{ type.name }}</button>
 5 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 6 |   <thead>
 7 |     <tr>
 8 |       <th>ID</th>
 9 |       <th v-if="vText === 'posts'">Post Title</th>
10 |       <th v-else-if="vText === 'users'">User Email</th>
11 |       <th v-else-if="vText === 'todos'"> Todos</th>
12 |       <th v-else>Post Title/user email/todos</th>
13 |       <th>Activity</th>
14 | 
15 |     </tr>
16 |   </thead>
17 |   <tbody>
18 |     <tr v-for="info in infos">
19 |       <th>
20 |         {{ info.id }}
21 |       </th>
22 |       <th >
23 |         {{ info.title }}
24 |         {{ info.email}}
25 |       </th>
26 |       </th>
27 |       <th>
28 |         <button class="button is-success">Edit</button>
29 |         <button class="button is-danger">Delete</button>
30 |       </th>
31 |     </tr>
32 | 
33 |   </tbody>
34 | </table>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | import axios from 'axios'
41 | export default {
42 |   mkTest: 'users',
43 |   data () {
44 |     return {
45 |       vText: '',
46 |       // vPOSTS: 'posts',
47 |       types: [
48 |         {name: 'posts', id: 1},
49 |         {name: 'users', id: 2},
50 |         {name: 'todos', id: 3}
51 |       ],
52 |       infos: []
53 |     }
54 |   },
55 |   methods: {
56 |     vKamal: function (id) {
57 |       let url = (this.types[id - 1].name)
58 |       this.vText = (this.types[id - 1].name)
59 |       axios.get(`https://jsonplaceholder.typicode.com/${url}`)
60 |         .then(function (response) {
61 |           this.infos = response.data
62 |         }.bind(this))
63 |         .catch(function (error) {
64 |           console.log(error)
65 |         })
66 |     }
67 |   },
68 |   mounted () {
69 |     // axios.get(`https://jsonplaceholder.typicode.com/${url}`)
70 |     //   .then(function (response) {
71 |     //     this.posts = response.data
72 |     //   }.bind(this))
73 |     //   .catch(function (error) {
74 |     //     console.log(error)
75 |     //   })
76 |   }
77 | }
78 | </script>
79 | 
80 | <style lang="css" scoped >
81 | 
82 | .vvb-margin{
83 |   margin-top: 30px;
84 | }
85 | .btn-gap{
86 |   margin-bottom: 20px;
87 |   margin-left: 5px;
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/src/components/vue/prop/PropChild.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-8 is-offset-2">
 4 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 5 |   <thead>
 6 |     <tr>
 7 |       <th>ID</th>
 8 |       <th>Title</th>
 9 | 
10 | 
11 | 
12 |     </tr>
13 |   </thead>
14 |   <tbody>
15 |     <tr v-for="post in propPosts">
16 |       <th>
17 |         {{ post.id }}
18 |       </th>
19 |       <th>
20 |         {{ post.title }}
21 |       </th>
22 |     </tr>
23 | 
24 |   </tbody>
25 | </table>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | 
32 | export default {
33 |   name: 'VText',
34 |   props: {
35 |     propPosts: {
36 |       type: String,
37 |       required: false
38 |     }
39 |   },
40 |   data () {
41 |     return {
42 |       vText: 'This is a v-text',
43 |       posts: []
44 |     }
45 |   }
46 |   // created () {
47 |   //   axios.get('https://jsonplaceholder.typicode.com/posts')
48 |   //     .then(function (response) {
49 |   //       this.posts = response.data
50 |   //     }.bind(this))
51 |   //     .catch(function (error) {
52 |   //       console.log(error)
53 |   //     })
54 |   // }
55 | }
56 | </script>
57 | 
58 | <style lang="css" scoped >
59 | 
60 | .vvb-margin{
61 |   margin-top: 30px;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/vue/prop/PropMain.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns">
 3 |     <div class="column is-6 is-offset-2">
 4 |         <article class="message prop-message is-danger" :class="close">
 5 |           <div class="message-header" >
 6 |             <p>Props Vue</p>
 7 |             <button class="delete"  aria-label="delete" @click="closeMessage"></button>
 8 |           </div>
 9 |           <div class="message-body">
10 |             <h1>props help for accessing data from parent to child</h1>
11 |           </div>
12 |         </article>
13 |       <prop-component :propPosts="posts"></prop-component>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import axios from 'axios'
21 | import VPropHere from '@/components/vue/prop/PropChild'
22 | export default {
23 |   name: 'VText',
24 |   data () {
25 |     return {
26 |       vModel: 'Write something boss!',
27 |       isSuccess: 'is-danger',
28 |       close: '',
29 |       posts: []
30 |     }
31 |   },
32 |   components: {
33 |     'prop-component': VPropHere
34 |   },
35 |   methods: {
36 |     closeMessage: function () {
37 |       this.close = 'close-message'
38 |     }
39 |   },
40 |   created () {
41 |     axios.get('https://jsonplaceholder.typicode.com/posts')
42 |       .then(function (response) {
43 |         this.posts = response.data
44 |       }.bind(this))
45 |       .catch(function (error) {
46 |         console.log(error)
47 |       })
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="css" scoped >
53 | 
54 | .vvb-margin{
55 |   margin-top: 30px;
56 | },
57 | .prop-message{
58 |   margin-top: 10px;
59 | }
60 | .close-message{
61 |   display:none;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/vue/prop/emit/PropChild.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 |     <div class="column is-8 is-offset-2">
 4 |       <div class="">
 5 |         <h1>{{emitProps}}</h1>
 6 |         <button class="button is-dark" @click="emitTest">$emit</button>
 7 |         <br>
 8 |       </div>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | 
15 | export default {
16 |   name: 'VText',
17 |   props: {
18 |     emitProps: {
19 |       type: String,
20 |       required: false
21 |     }
22 |   },
23 |   data () {
24 |     return {
25 |       vText: 'this is $emit type props'
26 |     }
27 |   },
28 |   methods: {
29 |     emitTest: function () {
30 |       this.$emit('emitTest', this.vText)
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style lang="css" scoped >
37 | 
38 | .vvb-margin{
39 |   margin-top: 30px;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/vue/prop/emit/PropMain.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns">
 3 |     <div class="column is-6 is-offset-2">
 4 |         <article class="message prop-message is-danger" :class="close">
 5 |           <div class="message-header" >
 6 |             <p>Props Vue</p>
 7 |             <button class="delete"  aria-label="delete" @click="closeMessage"></button>
 8 |           </div>
 9 |           <div class="message-body">
10 |             <h1>props help for accessing data from parent to child</h1>
11 |           </div>
12 |         </article>
13 |       <prop-component  :emitProps="meEmit"  @emitTest="applyEmit($event)"></prop-component>
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import VPropHere from '@/components/vue/prop/emit/PropChild'
21 | export default {
22 |   name: 'VText',
23 |   data () {
24 |     return {
25 |       vModel: 'Write something boss!',
26 |       meEmit: 'children to parent props',
27 |       isSuccess: 'is-danger',
28 |       close: ''
29 |     }
30 |   },
31 |   components: {
32 |     'prop-component': VPropHere
33 |   },
34 |   methods: {
35 |     closeMessage: function () {
36 |       this.close = 'close-message'
37 |     },
38 |     applyEmit (applyEmit) {
39 |       this.meEmit = applyEmit
40 |     }
41 |   }
42 | }
43 | </script>
44 | 
45 | <style lang="css" scoped >
46 | 
47 | .vvb-margin{
48 |   margin-top: 30px;
49 | },
50 | .prop-message{
51 |   margin-top: 10px;
52 | }
53 | .close-message{
54 |   display:none;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/src/components/vue/vue-jquery/VueJquery.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div class="columns">
 4 |       <div class="column is-8 is-offset-2 notification is-info">
 5 |         <section class="hero">
 6 |           <div class="hero-body">
 7 |             <div class="container">
 8 |               <h1 class="title">
 9 |                 {{ msg | toUpper }}
10 |                 <p id="jqrvue">Hi ,Boss ..Are you JQuery and Vue Lover</p>
11 |               </h1>
12 |               <button class="button is-danger" id="hide">Hide</button>
13 |               <button class="button is-success" id="show">Show</button>
14 | 
15 |               <h2 class="subtitle">
16 |                 <br>
17 |                 {{ author }}
18 |               </h2>
19 |             </div>
20 |           </div>
21 |         </section>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import JQuery from 'jquery'
29 | var $ = JQuery
30 | export default {
31 |   name: 'HelloWorld',
32 |   data () {
33 |     return {
34 |       msg: 'Vue + Jquery',
35 |       author: '@code4mk'
36 |     }
37 |   },
38 |   mounted: function () {
39 |     this.$nextTick(function () {
40 |       $(document).ready(function () {
41 |         $('#hide').click(function () {
42 |           $('#jqrvue').hide()
43 |         })
44 |         $('#show').click(function () {
45 |           $('#jqrvue').show()
46 |         })
47 |       })
48 |     })
49 |   },
50 |   filters: {
51 |     toUpper: function (value) {
52 |       return value.toUpperCase()
53 |     }
54 |   }
55 | }
56 | </script>
57 | 
58 | <!-- Add "scoped" attribute to limit CSS to this component only -->
59 | <style lang="css" scoped>
60 | .hello{
61 |   margin-top: 120px;
62 | }
63 | #jqrvue {
64 |   color: black;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/components/vuex/VuexGetters.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 | 
 4 |     <div class="column is-8 is-offset-2">
 5 |       <h1>{{ vText }}</h1>
 6 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 7 |         <thead>
 8 |           <tr>
 9 |             <th>ID</th>
10 |             <th>Title</th>
11 |             <th>Edit</th>
12 | 
13 |           </tr>
14 |         </thead>
15 |         <tbody>
16 |           <tr v-for="user in adultUser">
17 |             <th>
18 |               {{ user.name }}
19 |             </th>
20 |             <th>
21 |               {{ user.age }}
22 |             </th>
23 |             <th>
24 |               <button class="button is-success" >increase</button>
25 |               <button class="button is-danger">Delete</button>
26 |             </th>
27 |           </tr>
28 | 
29 |         </tbody>
30 |       </table>
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import {mapGetters} from 'vuex'
37 | export default {
38 |   name: 'VText',
39 |   data () {
40 |     return {
41 |       vText: 'Vuex Getters'
42 |     }
43 |   },
44 |   computed: {
45 |     ...mapGetters([
46 |       'adultUser'
47 |     ])
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="css" scoped >
53 | 
54 | .vvb-margin{
55 |   margin-top: 30px;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/components/vuex/VuexMutations.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 | 
 4 |     <div class="column is-8 is-offset-2">
 5 |       <h1>{{ vText }}</h1>
 6 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 7 |         <thead>
 8 |           <tr>
 9 |             <th>ID</th>
10 |             <th>Title</th>
11 |             <th>Edit</th>
12 | 
13 |           </tr>
14 |         </thead>
15 |         <tbody>
16 |           <tr v-for="user in adultUser">
17 |             <th>
18 |               {{ user.name }}
19 |             </th>
20 |             <th>
21 |               {{ user.age }}
22 |             </th>
23 |             <th>
24 |               <button class="button is-success" @click="adultIncrease" >increase</button>
25 |               <button class="button is-danger" @click="adultDecrease">decrease</button>
26 |             </th>
27 |           </tr>
28 | 
29 |         </tbody>
30 |       </table>
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import {mapGetters, mapMutations} from 'vuex'
37 | export default {
38 |   name: 'VText',
39 |   data () {
40 |     return {
41 |       vText: 'Vuex Mutations'
42 |     }
43 |   },
44 |   computed: {
45 |     ...mapGetters([
46 |       'adultUser'
47 |     ])
48 |   },
49 |   methods: {
50 |     // adultIncrease () {
51 |     //   this.$store.commit('adultIncrease')
52 |     // }
53 |     ...mapMutations([
54 |       'adultIncrease',
55 |       'adultDecrease'
56 |     ])
57 |   }
58 | }
59 | </script>
60 | 
61 | <style lang="css" scoped >
62 | 
63 | .vvb-margin{
64 |   margin-top: 30px;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/components/vuex/VuexState.vue:
--------------------------------------------------------------------------------
 1 | <template lang="html">
 2 |   <div class="columns vvb-margin">
 3 | 
 4 |     <div class="column is-8 is-offset-2">
 5 |       <h1>{{ vText }}</h1>
 6 |       <table class="table is-bordered is-striped is-narrow is-fullwidth">
 7 |         <thead>
 8 |           <tr>
 9 |             <th>ID</th>
10 |             <th>Title</th>
11 |             <th>Edit</th>
12 | 
13 |           </tr>
14 |         </thead>
15 |         <tbody>
16 |           <tr v-for="user in users">
17 |             <th>
18 |               {{ user.name }}
19 |             </th>
20 |             <th>
21 |               {{ user.age }}
22 |             </th>
23 |             <th>
24 |               <button class="button is-success">Edit</button>
25 |               <button class="button is-danger">Delete</button>
26 |             </th>
27 |           </tr>
28 | 
29 |         </tbody>
30 |       </table>
31 |     </div>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import { mapState } from 'vuex'
37 | export default {
38 |   name: 'VText',
39 |   data () {
40 |     return {
41 |       vText: 'Vuex State'
42 |     }
43 |   },
44 |   computed: {
45 |     ...mapState([
46 |       'users'
47 |     ])
48 |   }
49 | }
50 | </script>
51 | 
52 | <style lang="css" scoped >
53 | 
54 | .vvb-margin{
55 |   margin-top: 30px;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import { store } from './store'
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   store: store,
14 |   template: '<App/>',
15 |   components: { App }
16 | })
17 | 


--------------------------------------------------------------------------------
/src/mixins/vueMixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   methods: {
 3 |     changeMe () {
 4 |       this.isSuccess = 'is-danger'
 5 |       this.isLoadingDanger = 'is-loading'
 6 |       this.isLoadingDark = ''
 7 |     },
 8 |     changeMeDark () {
 9 |       this.isSuccess = 'is-dark is-loading'
10 |       this.isLoadingDark = 'is-loading'
11 |       this.isLoadingDanger = ''
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Router from 'vue-router'
  3 | import TheDirective from '@/components/vue/directives/TheDirective'
  4 | import HiVvb from '@/components/HiVvb'
  5 | import VText from '@/components/vue/directives/v-text'
  6 | import VHtml from '@/components/vue/directives/v-html'
  7 | import VShow from '@/components/vue/directives/v-show'
  8 | import VConditions from '@/components/vue/directives/v-conditions'
  9 | import VModel from '@/components/vue/directives/v-model'
 10 | import VBind from '@/components/vue/directives/v-bind'
 11 | import VOn from '@/components/vue/directives/v-on'
 12 | import VFor from '@/components/vue/directives/v-for'
 13 | import VMixin from '@/components/vue/mixins/vMixins'
 14 | import VComponent from '@/components/vue/component/ComponentMain'
 15 | import VProp from '@/components/vue/prop/PropMain'
 16 | import VEmit from '@/components/vue/prop/emit/PropMain'
 17 | import VFilter from '@/components/vue/filter/VueFilters'
 18 | import VxState from '@/components/vuex/VuexState'
 19 | import VxGetter from '@/components/vuex/VuexGetters'
 20 | import VxMutation from '@/components/vuex/VuexMutations'
 21 | import VxJquery from '@/components/vue/vue-jquery/VueJquery'
 22 | import VSelectMultiFor from '@/components/vue/multi-select/SelectFor'
 23 | Vue.use(Router)
 24 | export default new Router({
 25 |   mode: 'history',
 26 |   linkActiveClass: 'is-active',
 27 |   routes: [
 28 |     {
 29 |       path: '/',
 30 |       name: 'HiVvb',
 31 |       component: HiVvb
 32 |     },
 33 |     {
 34 |       path: '/directives',
 35 |       name: 'TheDirective',
 36 |       component: TheDirective
 37 |     },
 38 |     {
 39 |       path: '/v-text',
 40 |       name: 'VText',
 41 |       component: VText,
 42 |       alias: '/text-alias'
 43 |     },
 44 |     {
 45 |       path: '/v-html',
 46 |       name: 'VHtml',
 47 |       component: VHtml
 48 |     },
 49 |     {
 50 |       path: '/v-show',
 51 |       name: 'VShow',
 52 |       component: VShow
 53 |     },
 54 |     {
 55 |       path: '/v-conditions',
 56 |       name: 'VConditions',
 57 |       component: VConditions
 58 |     },
 59 |     {
 60 |       path: '/v-model',
 61 |       name: 'VModel',
 62 |       component: VModel
 63 |     },
 64 |     {
 65 |       path: '/v-bind',
 66 |       name: 'VBind',
 67 |       component: VBind
 68 |     },
 69 |     {
 70 |       path: '/v-on',
 71 |       name: 'VOn',
 72 |       component: VOn
 73 |     },
 74 |     {
 75 |       path: '/v-mefor',
 76 |       name: 'VFor',
 77 |       component: VFor
 78 |     },
 79 |     {
 80 |       path: '/mixins',
 81 |       name: 'VMixin',
 82 |       component: VMixin
 83 |     },
 84 |     {
 85 |       path: '/components',
 86 |       name: 'VComponent',
 87 |       component: VComponent
 88 |     },
 89 |     {
 90 |       path: '/props',
 91 |       name: 'VProp',
 92 |       component: VProp
 93 |     },
 94 |     {
 95 |       path: '/emit',
 96 |       name: 'VEmit',
 97 |       component: VEmit
 98 |     },
 99 |     {
100 |       path: '/filters',
101 |       name: 'VFilter',
102 |       component: VFilter
103 |     },
104 |     {
105 |       path: '/vx-state',
106 |       name: 'VxState',
107 |       component: VxState
108 |     },
109 |     {
110 |       path: '/vx-getters',
111 |       name: 'VxGetter',
112 |       component: VxGetter
113 |     },
114 |     {
115 |       path: '/vx-mutations',
116 |       name: 'VxMutation',
117 |       component: VxMutation
118 |     },
119 |     {
120 |       path: '/vx-jquery',
121 |       name: 'VxJquery',
122 |       component: VxJquery
123 |     },
124 |     {
125 |       path: '/v-multi-select',
126 |       name: 'VSelectMultiFor',
127 |       component: VSelectMultiFor
128 |     }
129 |   ]
130 | })
131 | 


--------------------------------------------------------------------------------
/src/store/actions.js:
--------------------------------------------------------------------------------
1 | export default {
2 | //
3 | }
4 | 


--------------------------------------------------------------------------------
/src/store/getters.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   adultUser: state => {
3 |     return state.users.filter(user => user.age > 21)
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import state from './state'
 4 | import getters from './getters'
 5 | import mutations from './mutations'
 6 | import actions from './actions'
 7 | Vue.use(Vuex)
 8 | export const store = new Vuex.Store({
 9 |   state: state,
10 |   getters: getters,
11 |   mutations: mutations,
12 |   actions: actions
13 | })
14 | 


--------------------------------------------------------------------------------
/src/store/mutations.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   adultIncrease (state) {
 3 |     // state.users[1].age += 2
 4 |     state.users.forEach(user => {
 5 |       user.age += 2
 6 |     })
 7 |   },
 8 |   adultDecrease (state) {
 9 |     // state.users[1].age += 2
10 |     state.users.forEach(user => {
11 |       user.age -= 2
12 |     })
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/store/state.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   users: [
 3 |     {name: 'kamal', age: 25, post: true},
 4 |     {name: 'mostafa', age: 21, post: true},
 5 |     {name: 'nishi', age: 18, post: true},
 6 |     {name: 'kawsar', age: 31, post: false},
 7 |     {name: 'jamal', age: 32, post: true}
 8 |   ],
 9 |   num: 0
10 | }
11 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code4mk/vue-vuex-boss/32682c46a8b6426fde1f1d46eaa8bcfc79077a7c/static/.gitkeep


--------------------------------------------------------------------------------