Home
vue-vuetifyjs-firebase

vue-vuetifyjs-firebase

App logo

Vue + Vuetifyjs + Firebase project

A Vue.js project using Firebase + vuetifyjs

The App

Alt Text

(simple app with Sigin, Signup page and Dashboard page)

How to set up Firabase Configuration?

First create account - firebase.google.com
Go to folder src/helpers/

 src
|
|-helpers
  |
  firebaseConfig.js

and edit file "firebaseConfig.js"
Edit this fields:
API_KEY, AUTH_DOMAIN, DATA_BASE_URL,
PROJECT_ID, STORAGE_BUCKET
with your firebase Configuration

 // firebase configurations
export const firebaseConfig = {
  apiKey: 'API_KEY',
  authDomain: 'AUTH_DOMAIN',
  databaseURL: 'DATA_BASE_URL',
  projectId: 'PROJECT_ID',
  storageBucket: 'STORAGE_BUCKET'
}

Build Setup

 # install dependencies
npm install

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

# build for production with minification
npm run build

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

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

Get to know me

I am Janis, designer and I love front-end web development alos photography.

Twitter , Unsplash

Dependencies

firebase: ^4.10.1 vue: ^2.5.2 vue-router: ^3.0.1 vuetify: ^1.0.0 vuex: ^3.0.1

Dependencies

autoprefixer: ^7.1.2 babel-core: ^6.22.1 babel-eslint: ^7.1.1 babel-helper-vue-jsx-merge-props: ^2.0.3 babel-loader: ^7.1.1 babel-plugin-syntax-jsx: ^6.18.0 babel-plugin-transform-runtime: ^6.22.0 babel-plugin-transform-vue-jsx: ^3.5.0 babel-preset-env: ^1.3.2 babel-preset-stage-2: ^6.22.0 chalk: ^2.0.1 copy-webpack-plugin: ^4.0.1 css-loader: ^0.28.0 eslint: ^3.19.0 eslint-config-standard: ^10.2.1 eslint-friendly-formatter: ^3.0.0 eslint-loader: ^1.7.1 eslint-plugin-html: ^3.0.0 eslint-plugin-import: ^2.7.0 eslint-plugin-node: ^5.2.0 eslint-plugin-promise: ^3.4.0 eslint-plugin-standard: ^3.0.1 extract-text-webpack-plugin: ^3.0.0 file-loader: ^1.1.4 friendly-errors-webpack-plugin: ^1.6.1 html-webpack-plugin: ^2.30.1 node-notifier: ^5.1.2 optimize-css-assets-webpack-plugin: ^3.2.0 ora: ^1.2.0 portfinder: ^1.0.13 postcss-import: ^11.0.0 postcss-loader: ^2.0.8 postcss-url: ^7.2.1 rimraf: ^2.6.0 semver: ^5.3.0 shelljs: ^0.7.6 uglifyjs-webpack-plugin: ^1.1.1 url-loader: ^0.5.8 vue-loader: ^13.3.0 vue-style-loader: ^3.0.1 vue-template-compiler: ^2.5.2 webpack: ^3.6.0 webpack-bundle-analyzer: ^2.9.0 webpack-dev-server: ^2.9.1 webpack-merge: ^4.1.0

© 2023 Vuejscomponent All Rights Reserved

Introducing a blog that delves into the exciting world of Vue.js components. Stay tuned for insightful examples and valuable insights that will elevate your Vue.js development skills.