├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    ├── prod.env.js
    └── test.env.js
├── database.rules.json
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── Hello.vue
    └── main.js
├── static
    └── .gitkeep
└── test
    ├── e2e
        ├── custom-assertions
        │   └── elementCount.js
        ├── nightwatch.conf.js
        ├── runner.js
        └── specs
        │   └── test.js
    └── unit
        ├── .eslintrc
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["es2015", "stage-2"],
 3 |   "plugins": ["transform-runtime"],
 4 |   "comments": false,
 5 |   "env": {
 6 |     "test": {
 7 |       "plugins": [ "istanbul" ]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.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 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   parserOptions: {
 5 |     sourceType: 'module'
 6 |   },
 7 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'html'
12 |   ],
13 |   // add your custom rules here
14 |   'rules': {
15 |     // allow paren-less arrow functions
16 |     'arrow-parens': 0,
17 |     // allow async-await
18 |     'generator-star-spacing': 0,
19 |     // allow debugger during development
20 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | test/unit/coverage
 6 | test/e2e/reports
 7 | selenium-debug.log
 8 | .firebaserc
 9 | firebase.json
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="http://i.imgur.com/WQWi5sS.png" height="200px">
 2 | 
 3 | # vuefire-quickstart
 4 | 
 5 | > **vuefire-quickstart** makes web application development with Vue.js and Firebase
 6 | simple, providing the required npm modules and helpful comments. In the future we will
 7 | likely move toward a more opinionated structure that allows for rapid project
 8 | scaffolding. It comes bundled with webpack and Babel so you can tap into the
 9 | latest trends in JavaScript app development.
10 | 
11 | [**A demo version is available here:** https://vuefire-quickstart-demo.firebaseapp.com/]
12 | (https://vuefire-quickstart-demo.firebaseapp.com/)
13 | 
14 | ## Build Setup
15 | 
16 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
17 | 
18 | ``` bash
19 | # install dependencies
20 | npm install
21 | 
22 | # serve with hot reload at localhost:8080
23 | npm run dev
24 | 
25 | # build for production with minification
26 | npm run build
27 | 
28 | # run unit tests
29 | npm run unit
30 | 
31 | # run e2e tests
32 | npm run e2e
33 | 
34 | # run all tests
35 | npm test
36 | ```
37 | 
38 | ## Deploy to Firebase
39 | 
40 | **Note:** When deploying with Firebase, you will be prompted for the directory
41 | name that contains your built app. By default, Firebase searches for a `public`
42 | directory. You should change this to `dist` to avoid having to modify the build
43 | process that came with the template.
44 | 
45 | ``` bash
46 | 
47 | # build for production with minification
48 | npm run build
49 | 
50 | # make sure you've installed the firebase CLI
51 | npm install -g firebase-tools
52 | 
53 | # initialize a firebase app; see above note
54 | firebase init
55 | 
56 | # deploy to firebase servers
57 | firebase deploy
58 | 
59 | ```
60 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/shelljs/shelljs
 2 | require('./check-versions')()
 3 | require('shelljs/global')
 4 | env.NODE_ENV = 'production'
 5 | 
 6 | var path = require('path')
 7 | var config = require('../config')
 8 | var ora = require('ora')
 9 | var webpack = require('webpack')
10 | var webpackConfig = require('./webpack.prod.conf')
11 | 
12 | console.log(
13 |   '  Tip:\n' +
14 |   '  Built files are meant to be served over an HTTP server.\n' +
15 |   '  Opening index.html over file:// won\'t work.\n'
16 | )
17 | 
18 | var spinner = ora('building for production...')
19 | spinner.start()
20 | 
21 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
22 | rm('-rf', assetsPath)
23 | mkdir('-p', assetsPath)
24 | cp('-R', 'static/*', assetsPath)
25 | 
26 | webpack(webpackConfig, function (err, stats) {
27 |   spinner.stop()
28 |   if (err) throw err
29 |   process.stdout.write(stats.toString({
30 |     colors: true,
31 |     modules: false,
32 |     children: false,
33 |     chunks: false,
34 |     chunkModules: false
35 |   }) + '\n')
36 | })
37 | 


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


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


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | var config = require('../config')
 3 | if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 4 | var path = require('path')
 5 | var express = require('express')
 6 | var webpack = require('webpack')
 7 | var opn = require('opn')
 8 | var proxyMiddleware = require('http-proxy-middleware')
 9 | var webpackConfig = process.env.NODE_ENV === 'testing'
10 |   ? require('./webpack.prod.conf')
11 |   : require('./webpack.dev.conf')
12 | 
13 | // default port where dev server listens for incoming traffic
14 | var port = process.env.PORT || config.dev.port
15 | // Define HTTP proxies to your custom API backend
16 | // https://github.com/chimurai/http-proxy-middleware
17 | var proxyTable = config.dev.proxyTable
18 | 
19 | var app = express()
20 | var compiler = webpack(webpackConfig)
21 | 
22 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
23 |   publicPath: webpackConfig.output.publicPath,
24 |   quiet: true
25 | })
26 | 
27 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
28 |   log: () => {}
29 | })
30 | // force page reload when html-webpack-plugin template changes
31 | compiler.plugin('compilation', function (compilation) {
32 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
33 |     hotMiddleware.publish({ action: 'reload' })
34 |     cb()
35 |   })
36 | })
37 | 
38 | // proxy api requests
39 | Object.keys(proxyTable).forEach(function (context) {
40 |   var options = proxyTable[context]
41 |   if (typeof options === 'string') {
42 |     options = { target: options }
43 |   }
44 |   app.use(proxyMiddleware(context, options))
45 | })
46 | 
47 | // handle fallback for HTML5 history API
48 | app.use(require('connect-history-api-fallback')())
49 | 
50 | // serve webpack bundle output
51 | app.use(devMiddleware)
52 | 
53 | // enable hot-reload and state-preserving
54 | // compilation error display
55 | app.use(hotMiddleware)
56 | 
57 | // serve pure static assets
58 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
59 | app.use(staticPath, express.static('./static'))
60 | 
61 | var uri = 'http://localhost:' + port
62 | 
63 | devMiddleware.waitUntilValid(function () {
64 |   console.log('> Listening at ' + uri + '\n')
65 | })
66 | 
67 | module.exports = app.listen(port, function (err) {
68 |   if (err) {
69 |     console.log(err)
70 |     return
71 |   }
72 | 
73 |   // when env is testing, don't need open it
74 |   if (process.env.NODE_ENV !== 'testing') {
75 |     opn(uri)
76 |   }
77 | })
78 | 


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


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var config = require('../config')
  3 | var utils = require('./utils')
  4 | var projectRoot = path.resolve(__dirname, '../')
  5 | 
  6 | var env = process.env.NODE_ENV
  7 | // check env & config/index.js to decide whether to enable CSS source maps for the
  8 | // various preprocessor loaders added to vue-loader at the end of this file
  9 | var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
 10 | var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
 11 | var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
 12 | 
 13 | module.exports = {
 14 |   entry: {
 15 |     app: './src/main.js'
 16 |   },
 17 |   output: {
 18 |     path: config.build.assetsRoot,
 19 |     publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 20 |     filename: '[name].js'
 21 |   },
 22 |   resolve: {
 23 |     extensions: ['', '.js', '.vue', '.json'],
 24 |     fallback: [path.join(__dirname, '../node_modules')],
 25 |     alias: {
 26 |       'vue$': 'vue/dist/vue.common.js',
 27 |       'src': path.resolve(__dirname, '../src'),
 28 |       'assets': path.resolve(__dirname, '../src/assets'),
 29 |       'components': path.resolve(__dirname, '../src/components')
 30 |     }
 31 |   },
 32 |   resolveLoader: {
 33 |     fallback: [path.join(__dirname, '../node_modules')]
 34 |   },
 35 |   module: {
 36 |     preLoaders: [
 37 |       {
 38 |         test: /\.vue$/,
 39 |         loader: 'eslint',
 40 |         include: [
 41 |           path.join(projectRoot, 'src')
 42 |         ],
 43 |         exclude: /node_modules/
 44 |       },
 45 |       {
 46 |         test: /\.js$/,
 47 |         loader: 'eslint',
 48 |         include: [
 49 |           path.join(projectRoot, 'src')
 50 |         ],
 51 |         exclude: /node_modules/
 52 |       }
 53 |     ],
 54 |     loaders: [
 55 |       {
 56 |         test: /\.vue$/,
 57 |         loader: 'vue'
 58 |       },
 59 |       {
 60 |         test: /\.js$/,
 61 |         loader: 'babel',
 62 |         include: [
 63 |           path.join(projectRoot, 'src')
 64 |         ],
 65 |         exclude: /node_modules/
 66 |       },
 67 |       {
 68 |         test: /\.json$/,
 69 |         loader: 'json'
 70 |       },
 71 |       {
 72 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 73 |         loader: 'url',
 74 |         query: {
 75 |           limit: 10000,
 76 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
 77 |         }
 78 |       },
 79 |       {
 80 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 81 |         loader: 'url',
 82 |         query: {
 83 |           limit: 10000,
 84 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
 85 |         }
 86 |       }
 87 |     ]
 88 |   },
 89 |   eslint: {
 90 |     formatter: require('eslint-friendly-formatter')
 91 |   },
 92 |   vue: {
 93 |     loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
 94 |     postcss: [
 95 |       require('autoprefixer')({
 96 |         browsers: ['last 2 versions']
 97 |       })
 98 |     ]
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var config = require('../config')
 2 | var webpack = require('webpack')
 3 | var merge = require('webpack-merge')
 4 | var utils = require('./utils')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrors = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // eval-source-map is faster for development
19 |   devtool: '#eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.optimize.OccurrenceOrderPlugin(),
26 |     new webpack.HotModuleReplacementPlugin(),
27 |     new webpack.NoErrorsPlugin(),
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 FriendlyErrors()
35 |   ]
36 | })
37 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var config = require('../config')
  3 | var utils = require('./utils')
  4 | var webpack = require('webpack')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
  8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  9 | var env = process.env.NODE_ENV === 'testing'
 10 |   ? require('../config/test.env')
 11 |   : config.build.env
 12 | 
 13 | var webpackConfig = merge(baseWebpackConfig, {
 14 |   module: {
 15 |     loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
 16 |   },
 17 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 18 |   output: {
 19 |     path: config.build.assetsRoot,
 20 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 21 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 22 |   },
 23 |   vue: {
 24 |     loaders: utils.cssLoaders({
 25 |       sourceMap: config.build.productionSourceMap,
 26 |       extract: true
 27 |     })
 28 |   },
 29 |   plugins: [
 30 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 31 |     new webpack.DefinePlugin({
 32 |       'process.env': env
 33 |     }),
 34 |     new webpack.optimize.UglifyJsPlugin({
 35 |       compress: {
 36 |         warnings: false
 37 |       }
 38 |     }),
 39 |     new webpack.optimize.OccurrenceOrderPlugin(),
 40 |     // extract css into its own file
 41 |     new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
 42 |     // generate dist index.html with correct asset hash for caching.
 43 |     // you can customize output by editing /index.html
 44 |     // see https://github.com/ampedandwired/html-webpack-plugin
 45 |     new HtmlWebpackPlugin({
 46 |       filename: process.env.NODE_ENV === 'testing'
 47 |         ? 'index.html'
 48 |         : config.build.index,
 49 |       template: 'index.html',
 50 |       inject: true,
 51 |       minify: {
 52 |         removeComments: true,
 53 |         collapseWhitespace: true,
 54 |         removeAttributeQuotes: true
 55 |         // more options:
 56 |         // https://github.com/kangax/html-minifier#options-quick-reference
 57 |       },
 58 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 59 |       chunksSortMode: 'dependency'
 60 |     }),
 61 |     // split vendor js into its own file
 62 |     new webpack.optimize.CommonsChunkPlugin({
 63 |       name: 'vendor',
 64 |       minChunks: function (module, count) {
 65 |         // any required modules inside node_modules are extracted to vendor
 66 |         return (
 67 |           module.resource &&
 68 |           /\.js$/.test(module.resource) &&
 69 |           module.resource.indexOf(
 70 |             path.join(__dirname, '../node_modules')
 71 |           ) === 0
 72 |         )
 73 |       }
 74 |     }),
 75 |     // extract webpack runtime and module manifest to its own file in order to
 76 |     // prevent vendor hash from being updated whenever app bundle is updated
 77 |     new webpack.optimize.CommonsChunkPlugin({
 78 |       name: 'manifest',
 79 |       chunks: ['vendor']
 80 |     })
 81 |   ]
 82 | })
 83 | 
 84 | if (config.build.productionGzip) {
 85 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
 86 | 
 87 |   webpackConfig.plugins.push(
 88 |     new CompressionWebpackPlugin({
 89 |       asset: '[path].gz[query]',
 90 |       algorithm: 'gzip',
 91 |       test: new RegExp(
 92 |         '\\.(' +
 93 |         config.build.productionGzipExtensions.join('|') +
 94 |         ')$'
 95 |       ),
 96 |       threshold: 10240,
 97 |       minRatio: 0.8
 98 |     })
 99 |   )
100 | }
101 | 
102 | module.exports = webpackConfig
103 | 


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


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css']
18 |   },
19 |   dev: {
20 |     env: require('./dev.env'),
21 |     port: 8080,
22 |     assetsSubDirectory: 'static',
23 |     assetsPublicPath: '/',
24 |     proxyTable: {},
25 |     // CSS Sourcemaps off by default because relative paths are "buggy"
26 |     // with this option, according to the CSS-Loader README
27 |     // (https://github.com/webpack/css-loader#sourcemaps)
28 |     // In our experience, they generally work as expected,
29 |     // just be aware of this issue when enabling this option.
30 |     cssSourceMap: false
31 |   }
32 | }
33 | 


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


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 | 
4 | module.exports = merge(devEnv, {
5 |   NODE_ENV: '"testing"'
6 | })
7 | 


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vuefire-quickstart</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": "vuefire-quickstart",
 3 |   "version": "1.0.0",
 4 |   "description": "A boilerplate for web applications using Vue.js and Firebase.",
 5 |   "author": "Samuel Roth",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "build": "node build/build.js",
10 |     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
11 |     "e2e": "node test/e2e/runner.js",
12 |     "test": "npm run unit && npm run e2e",
13 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
14 |   },
15 |   "dependencies": {
16 |     "firebase": "^3.6.4",
17 |     "vue": "^2.1.0",
18 |     "vuefire": "^1.3.0"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.4.0",
22 |     "babel-core": "^6.0.0",
23 |     "babel-eslint": "^7.0.0",
24 |     "babel-loader": "^6.0.0",
25 |     "babel-plugin-transform-runtime": "^6.0.0",
26 |     "babel-preset-es2015": "^6.0.0",
27 |     "babel-preset-stage-2": "^6.0.0",
28 |     "babel-register": "^6.0.0",
29 |     "chalk": "^1.1.3",
30 |     "connect-history-api-fallback": "^1.1.0",
31 |     "css-loader": "^0.25.0",
32 |     "eslint": "^3.7.1",
33 |     "eslint-friendly-formatter": "^2.0.5",
34 |     "eslint-loader": "^1.5.0",
35 |     "eslint-plugin-html": "^1.3.0",
36 |     "eslint-config-standard": "^6.1.0",
37 |     "eslint-plugin-promise": "^3.4.0",
38 |     "eslint-plugin-standard": "^2.0.1",
39 |     "eventsource-polyfill": "^0.9.6",
40 |     "express": "^4.13.3",
41 |     "extract-text-webpack-plugin": "^1.0.1",
42 |     "file-loader": "^0.9.0",
43 |     "friendly-errors-webpack-plugin": "^1.1.2",
44 |     "function-bind": "^1.0.2",
45 |     "html-webpack-plugin": "^2.8.1",
46 |     "http-proxy-middleware": "^0.17.2",
47 |     "json-loader": "^0.5.4",
48 |     "cross-env": "^3.1.3",
49 |     "karma": "^1.3.0",
50 |     "karma-coverage": "^1.1.1",
51 |     "karma-mocha": "^1.2.0",
52 |     "karma-phantomjs-launcher": "^1.0.0",
53 |     "karma-sinon-chai": "^1.2.0",
54 |     "karma-sourcemap-loader": "^0.3.7",
55 |     "karma-spec-reporter": "0.0.26",
56 |     "karma-webpack": "^1.7.0",
57 |     "lolex": "^1.4.0",
58 |     "mocha": "^3.1.0",
59 |     "chai": "^3.5.0",
60 |     "sinon": "^1.17.3",
61 |     "sinon-chai": "^2.8.0",
62 |     "inject-loader": "^2.0.1",
63 |     "babel-plugin-istanbul": "^3.0.0",
64 |     "phantomjs-prebuilt": "^2.1.3",
65 |     "chromedriver": "^2.21.2",
66 |     "cross-spawn": "^4.0.2",
67 |     "nightwatch": "^0.9.8",
68 |     "selenium-server": "2.53.1",
69 |     "semver": "^5.3.0",
70 |     "opn": "^4.0.2",
71 |     "ora": "^0.3.0",
72 |     "shelljs": "^0.7.4",
73 |     "url-loader": "^0.5.7",
74 |     "vue-loader": "^10.0.0",
75 |     "vue-style-loader": "^1.0.0",
76 |     "vue-template-compiler": "^2.1.0",
77 |     "webpack": "^1.13.2",
78 |     "webpack-dev-middleware": "^1.8.3",
79 |     "webpack-hot-middleware": "^2.12.2",
80 |     "webpack-merge": "^0.14.1"
81 |   },
82 |   "engines": {
83 |     "node": ">= 4.0.0",
84 |     "npm": ">= 3.0.0"
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <!-- App.vue
  2 |   This component is the root component for our Vue application. It is rendered
  3 |   in the project root's index.html file with the <div id="app"> tag. The Firebase
  4 |   instance exists only within this component.
  5 | -->
  6 | 
  7 | <template>
  8 |   <div id="app">
  9 |     <img src="./assets/logo.png" height="150px">
 10 |     <!-- Adding a new greeting; pretty much straight from the documentation! -->
 11 |     <form id="form" v-on:submit.prevent="addGreeting">
 12 |       <input type="text" v-model="newGreeting.lang" placeholder="Language Name">
 13 |       <input type="text" v-model="newGreeting.text" placeholder="How do you say hello?">
 14 |       <input type="submit" value="Add Greeting">
 15 |     </form>
 16 |     <!--
 17 |       Here we are iterating through a very simply array of greetings in
 18 |       different languages. To do this, we use the "v-for" directive. This
 19 |       is linked to our demo Firebase instance, which is described below.
 20 |     -->
 21 |     <h1 v-for="greeting in greetings">{{ greeting.text }}</h1>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 |   import Hello from './components/Hello'
 27 | 
 28 |   // This line is new!
 29 |   import Firebase from 'firebase'
 30 | 
 31 |   /*
 32 |    * The config was copied and pasted straight from the Firebase Dashboard.
 33 |    * Simply click "Add Firebase to Your Web App" to access yours.
 34 |    */
 35 | 
 36 |   let config = {
 37 |     apiKey: 'AIzaSyB3B6_lHNK5JXKNa8SIskj71aha6I9ZekA',
 38 |     authDomain: 'vuefire-quickstart-demo.firebaseapp.com',
 39 |     databaseURL: 'https://vuefire-quickstart-demo.firebaseio.com',
 40 |     storageBucket: 'vuefire-quickstart-demo.appspot.com',
 41 |     messagingSenderId: '248222879987'
 42 |   }
 43 | 
 44 |   // Here we are initializing the Firebase connection.
 45 |   let app = Firebase.initializeApp(config)
 46 |   let db = app.database()
 47 | 
 48 |   // Accessing the greetings reference; .ref() takes a URL as its parameter.
 49 |   let greetingsRef = db.ref('greetings')
 50 | 
 51 |   export default {
 52 |     name: 'app',
 53 | 
 54 |     /*
 55 |      * This section is added to the original CLI-generated App component. This
 56 |      * is where VueFire comes into play, allowing us to link our Vue app to
 57 |      * Firebase data relatively simply. More information is on the GitHub page:
 58 |      *
 59 |      * https://github.com/vuejs/vuefire/
 60 |      */
 61 | 
 62 |     firebase: {
 63 |       greetings: greetingsRef.limitToLast(5)
 64 |     },
 65 | 
 66 |     data () {
 67 |       return {
 68 |         newGreeting: {
 69 |           lang: '',
 70 |           text: ''
 71 |         }
 72 |       }
 73 |     },
 74 | 
 75 |     // We have added a simple method to add new greetings to our Firebase.
 76 |     methods: {
 77 |       addGreeting: function () {
 78 |         greetingsRef.push(this.newGreeting)
 79 |         this.newGreeting.lang = ''
 80 |         this.newGreeting.text = ''
 81 |       }
 82 |     },
 83 | 
 84 |     components: {
 85 |       Hello
 86 |     }
 87 |   }
 88 | </script>
 89 | 
 90 | <style>
 91 |   #app {
 92 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 93 |     -webkit-font-smoothing: antialiased;
 94 |     -moz-osx-font-smoothing: grayscale;
 95 |     text-align: center;
 96 |     color: #2c3e50;
 97 |     margin-top: 60px;
 98 |   }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sejr/vuefire-quickstart/31d6b24866a4e1a51abb6db1e592be2e7fe6574a/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Hello.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 7 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 8 |       <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
 9 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10 |       <br>
11 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12 |     </ul>
13 |     <h2>Ecosystem</h2>
14 |     <ul>
15 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 |     </ul>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'hello',
26 |   data () {
27 |     return {
28 |       msg: 'Welcome to Your Vue.js App'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <!-- Add "scoped" attribute to limit CSS to this component only -->
35 | <style scoped>
36 | h1, h2 {
37 |   font-weight: normal;
38 | }
39 | 
40 | ul {
41 |   list-style-type: none;
42 |   padding: 0;
43 | }
44 | 
45 | li {
46 |   display: inline-block;
47 |   margin: 0 10px;
48 | }
49 | 
50 | a {
51 |   color: #42b983;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/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 | 
 4 | import Vue from 'vue'
 5 | import VueFire from 'vuefire'
 6 | 
 7 | import App from './App'
 8 | 
 9 | /*
10 |  * Because we installed VueFire via npm and imported it as a module, we have
11 |  * to add this little snippet of code to 'install' it. If you include the lib
12 |  * via typical <script> tags in your HTML document, this isn't required.
13 |  */
14 | 
15 | Vue.use(VueFire)
16 | 
17 | /* eslint-disable no-new */
18 | new Vue({
19 |   el: '#app',
20 |   template: '<App/>',
21 |   components: { App }
22 | })
23 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sejr/vuefire-quickstart/31d6b24866a4e1a51abb6db1e592be2e7fe6574a/static/.gitkeep


--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // the name of the method is the filename.
 3 | // can be used in tests like this:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // for how to write custom assertions see
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | exports.assertion = function (selector, count) {
10 |   this.message = 'Testing if element <' + selector + '> has count: ' + count
11 |   this.expected = count
12 |   this.pass = function (val) {
13 |     return val === this.expected
14 |   }
15 |   this.value = function (res) {
16 |     return res.value
17 |   }
18 |   this.command = function (cb) {
19 |     var self = this
20 |     return this.api.execute(function (selector) {
21 |       return document.querySelectorAll(selector).length
22 |     }, [selector], function (res) {
23 |       cb.call(self, res)
24 |     })
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
 1 | require('babel-register')
 2 | var config = require('../../config')
 3 | 
 4 | // http://nightwatchjs.org/guide#settings-file
 5 | module.exports = {
 6 |   src_folders: ['test/e2e/specs'],
 7 |   output_folder: 'test/e2e/reports',
 8 |   custom_assertions_path: ['test/e2e/custom-assertions'],
 9 | 
10 |   selenium: {
11 |     start_process: true,
12 |     server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
13 |     host: '127.0.0.1',
14 |     port: 4444,
15 |     cli_args: {
16 |       'webdriver.chrome.driver': require('chromedriver').path
17 |     }
18 |   },
19 | 
20 |   test_settings: {
21 |     default: {
22 |       selenium_port: 4444,
23 |       selenium_host: 'localhost',
24 |       silent: true,
25 |       globals: {
26 |         devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 |       }
28 |     },
29 | 
30 |     chrome: {
31 |       desiredCapabilities: {
32 |         browserName: 'chrome',
33 |         javascriptEnabled: true,
34 |         acceptSslCerts: true
35 |       }
36 |     },
37 | 
38 |     firefox: {
39 |       desiredCapabilities: {
40 |         browserName: 'firefox',
41 |         javascriptEnabled: true,
42 |         acceptSslCerts: true
43 |       }
44 |     }
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | // 1. start the dev server using production config
 2 | process.env.NODE_ENV = 'testing'
 3 | var server = require('../../build/dev-server.js')
 4 | 
 5 | // 2. run the nightwatch test suite against it
 6 | // to run in additional browsers:
 7 | //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
 8 | //    2. add it to the --env flag below
 9 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
10 | // For more information on Nightwatch's config file, see
11 | // http://nightwatchjs.org/guide#settings-file
12 | var opts = process.argv.slice(2)
13 | if (opts.indexOf('--config') === -1) {
14 |   opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
15 | }
16 | if (opts.indexOf('--env') === -1) {
17 |   opts = opts.concat(['--env', 'chrome'])
18 | }
19 | 
20 | var spawn = require('cross-spawn')
21 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
22 | 
23 | runner.on('exit', function (code) {
24 |   server.close()
25 |   process.exit(code)
26 | })
27 | 
28 | runner.on('error', function (err) {
29 |   server.close()
30 |   throw err
31 | })
32 | 


--------------------------------------------------------------------------------
/test/e2e/specs/test.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   'default e2e tests': function (browser) {
 6 |     // automatically uses dev Server port from /config.index.js
 7 |     // default: http://localhost:8080
 8 |     // see nightwatch.conf.js
 9 |     const devServer = browser.globals.devServerURL
10 | 
11 |     browser
12 |       .url(devServer)
13 |       .waitForElementVisible('#app', 5000)
14 |       .assert.elementPresent('.hello')
15 |       .assert.containsText('h1', 'Welcome to Your Vue.js App')
16 |       .assert.elementCount('img', 1)
17 |       .end()
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | // Polyfill fn.bind() for PhantomJS
 2 | /* eslint-disable no-extend-native */
 3 | Function.prototype.bind = require('function-bind')
 4 | 
 5 | // require all test files (files that ends with .spec.js)
 6 | const testsContext = require.context('./specs', true, /\.spec$/)
 7 | testsContext.keys().forEach(testsContext)
 8 | 
 9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | const srcContext = require.context('src', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var path = require('path')
 7 | var merge = require('webpack-merge')
 8 | var baseConfig = require('../../build/webpack.base.conf')
 9 | var utils = require('../../build/utils')
10 | var webpack = require('webpack')
11 | var projectRoot = path.resolve(__dirname, '../../')
12 | 
13 | var webpackConfig = merge(baseConfig, {
14 |   // use inline sourcemap for karma-sourcemap-loader
15 |   module: {
16 |     loaders: utils.styleLoaders()
17 |   },
18 |   devtool: '#inline-source-map',
19 |   vue: {
20 |     loaders: {
21 |       js: 'babel-loader'
22 |     }
23 |   },
24 |   plugins: [
25 |     new webpack.DefinePlugin({
26 |       'process.env': require('../../config/test.env')
27 |     })
28 |   ]
29 | })
30 | 
31 | // no need for app entry during tests
32 | delete webpackConfig.entry
33 | 
34 | // Use babel for test files too
35 | webpackConfig.module.loaders.some(function (loader, i) {
36 |   if (/^babel(-loader)?$/.test(loader.loader)) {
37 |     loader.include.push(path.resolve(projectRoot, 'test/unit'))
38 |     return true
39 |   }
40 | })
41 | 
42 | module.exports = function (config) {
43 |   config.set({
44 |     // to run in additional browsers:
45 |     // 1. install corresponding karma launcher
46 |     //    http://karma-runner.github.io/0.13/config/browsers.html
47 |     // 2. add it to the `browsers` array below.
48 |     browsers: ['PhantomJS'],
49 |     frameworks: ['mocha', 'sinon-chai'],
50 |     reporters: ['spec', 'coverage'],
51 |     files: ['./index.js'],
52 |     preprocessors: {
53 |       './index.js': ['webpack', 'sourcemap']
54 |     },
55 |     webpack: webpackConfig,
56 |     webpackMiddleware: {
57 |       noInfo: true
58 |     },
59 |     coverageReporter: {
60 |       dir: './coverage',
61 |       reporters: [
62 |         { type: 'lcov', subdir: '.' },
63 |         { type: 'text-summary' }
64 |       ]
65 |     }
66 |   })
67 | }
68 | 


--------------------------------------------------------------------------------
/test/unit/specs/Hello.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Hello from 'src/components/Hello'
 3 | 
 4 | describe('Hello.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const vm = new Vue({
 7 |       el: document.createElement('div'),
 8 |       render: (h) => h(Hello)
 9 |     })
10 |     expect(vm.$el.querySelector('.hello h1').textContent)
11 |       .to.equal('Welcome to Your Vue.js App')
12 |   })
13 | })
14 | 


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