Building a Google Keep Clone with Vue and Firebase, Pt 1

In this tutorial, you will learn how to create a (minimal) Google Keep clone app with the Model-View-Viewmodel (MVVM) framework Vue and Firebase as a backend.

Vue introduces easy to use building blocks in the form of components.

Each component has its own ViewModel and can be composed of other components. What sets Vue apart from Angular is that Vue has a less steep learning curve. It focuses much more on providing an easy way to compose components and nothing more.

Firebase is a realtime NoSQL database in the cloud by Google. Firebase offers official libraries for Android, iOS, JavaScript, and even Angular. With Firebase you can build real-time apps very quickly!

For this tutorial, you will need some experience with ES6 aka ES2015, Node, and a little Vue.

You must have NodeJS installed on your device.

There are two tools that may be helpful during this tutorial:

  1. Vue.js Devtools: This plugin lets you explore the component tree and watch any values bound to the ViewModel inside the Chrome DevTools
  2. Vulcan by Firebase: Vulcan lets you explore your data inside your DevTools so you don’t need to adjust data without switching tabs

At the end of this part our app will look like this:

You can find the source code at Github (tag part_1) and play with the demo here.

Setup

  1. Install Vue Command Line globally (Vue is at version 1.0.18 at the time of writing this)
  2. Create a project with the vue-cli (use the default options)
  3. Install packages
  4. Run dev server
npm install -g vue-cli vue init webpack gkeep-vueifire cd gkeep-vueifire npm install npm run dev

When you visit localhost:8080 you should see the following screen:

Project Structure

  • index.html: root HTML-file. Your JavaScript and CSS are automatically injected into this file
  • config.js: config file (you can change your port here, add proxies to proxy to our own API, etc.)
  • build: contains node files to run and build your app (‘npm run dev’ runs ‘node build/dev-server.js’)
  • static: public folder containing static assets needed for your project
  • test: for your unit, integration, and tests

The starting point of the app is ‘src/main.js’.

// src/main.js import Vue from 'vue' // import Vue the ES6 way import App from './App' // import App.vue component /* eslint-disable no-new */ new Vue({ // new Vue instance el: 'body', // attach Vue to the body components: { App } // include App component globally })

When you use the App component like this , it will replace the app element with the template provided in App.vue. Also, the JavaScript and styles will be injected into the view automagically. Currently, the App component is referenced in ‘index.html’.

With .vue files you can write HTML, CSS, and JS all in the same file. This makes it very easy to develop with a component-mindset.

Note that you can write ES6 code inside the script block without worrying about browser compatibility! Webpack will use Babel to compile ES6 code to ES5. You can also add support for any other loaders like TypeScript, CoffeeScript, Sass, Less, etc.

If you followed the default when creating your project, eslint will be enabled by default. This will force us to follow the standard code styleguide. Make sure to pay attention to use 2 spaces and no semi-colons!

Hooking up Firebase

Log into Firebase and create a new app. You can create an app for free for development purposes.

You will need the app-URL in one of the next steps.

Install firebase through npm.

npm install firebase --save

Import Firebase at the top of main.js.

Next, pass the Firebase app link to a new Firebase instance.

import Vue from 'vue' import App from './App' import Firebase from 'firebase' let firebase = new Firebase('https://.firebaseio.com/') // ...

Now you can start adding, modifying and deleting data with Firebase. Make a notes array and add one note object to test if it is working.

import Vue from 'vue' import App from './App' import Firebase from 'firebase' let firebase = new Firebase('https://.firebaseio.com/') firebase.child('notes').set([ {title: 'Hello world', content: ‘Lorem ipsum’} ]) firebase.child('notes').on('value', (snapshot) => { let notes = snapshot.val() console.log(notes) window.alert(notes[0].title) }) // ...

When you look in the browser, you should get a popup saying ‘hello world’.

You just hooked up Firebase to your Vue-app. Next up is creating your first component!

Creating your first component


Originally published at www.laravelfeed.com.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.