Building a Simple Notes Manager with Vue.js
- Then I decided to be even more down-to-earth and build a Chrome extension that will replace the new tab page with the notes app.
- We will also need a special that deals with Vue’s single file components (more on it later).
- Vue.js managed to keep the Angular productivity spirit, but keep things simple.
- Let’s create our first component:
- So finally we’ve created our Chrome extension so that we can add notes right into our new tab page.
To show you the benefits of using Vue.js, I thought I’d make a simple, useful app from the ground up, as well as build a Chrome extension for it.
Reading Time: 11 minutes
Vue.js fascinates me. The author is Evan You, a former Angular developer. Somehow he managed to take the best of the two worlds — Angular and React — and build a simple, easy to learn, and extremely productive framework.
To show you the benefits of using Vue.js, I thought I’d make something useful from the ground up. I decided to go for apps like SimpleNote; clean and straightforward apps for taking notes. And the core part seems to be small enough to implement in a day. Then I decided to be even more down-to-earth and build a Chrome extension that will replace the new tab page with the notes app.
So in this article, you are going to learn:
for dependency management.
All right, that’s a start. Now we need to set up webpack and babel because we want to use ES6 features and make sure they are properly transpiled to ES5, which is better understood by major browsers.
that deals with Vue’s single file components (more on it later). We will also install a bunch of other dependencies, but don’t worry. I’ll explain why we need each one.
. You can find it here. Download it and place in the root of your project. The essential part of every webpack config is the rules section, in which you define how different files should be processed.
file. We’ll fix this later. But first, let’s take a closer look at what we are going to deal with.
As a long-time Angular 1 developer, I find Vue.js fascinating. We all know these Angular drawbacks: steep learning curve, confusing dependency injection system (which gets even worse with ES6 modules), overcomplicated directives/components, and a huge set of docs.
Vue.js managed to keep the Angular productivity spirit, but keep things simple. It is much easier to learn, component-oriented, and faster, too, because it’s not using the dirty-checking thing. Instead, it employs the virtual DOM, much like React does. So it’s productive from Day One.
Vue.js encourages the use of components from the start. Here’s how a typical component might look:
Let’s pause there and talk a little bit. As I said earlier, Vue.js kind of takes all the good things from Angular and React. It means that it still supports the two-way binding, and every Angular developer will find it very familiar. But the way it works underneath is not the same.
. Getters and setters are ES5-only, which is why Vue doesn’t support IE8 and below (well, who cares, right?).
Another caveat that follows from that is that you always need to specify properties that you will use in a data object, even though they are undefined at the start.
and add to it:
to get access to APIs.
Now let’s also create a simple Vue app that does nothing much. Let’s create our first component:
On the dark side of things, this file can get very large, and your editor (Vim in my case) can blow up or start working veeeeeery slowly.
(see the previous section).
One last piece that we need is to give Vue control over our page.
Time to see if it works. Run in a command line:
directory. Now your extension is loaded, and you should see “Hello World” when you open a new tab.
All right, that’s a great start. Let’s move on and make something interesting.
If you never saw an app like SimpleNotes, it’s very intuitive. You have a sidebar on the left with the list of all your notes, and then the central area is an editor. You can switch the current note by clicking on it in the sidebar, and then edit it in the editor. Our editor will be able to use markdown. But let’s start with a sidebar.
Oh well. A lot of stuff going on here. Let’s got through it line by line.
, etc. are all part of Milligram’s grid API which allows us to quickly markup our grid. Of course we need to install it first:
Now, to Vue-specific things:
Now all these should be very intuitive to Angular 1 users. I guess that’s why I got so easily hooked in the first place.
Let’s define our component:
. Changes are immediately displayed in the view.
You can try it yourself. Reload the browser and click on “+” to add a note.
We can add notes. That’s nice. But how can we save stuff so that when you open a new tab, all your notes are still there? Chrome storage to the rescue!
function that’s going to save all our notes into storage.
Note, that we use “ZENOTES” as our global key for storing notes array.
We also should load notes when the component is bound. It is easy to do with the components life-cycle hooks.
variable. And if it’s not there, set an empty array. I know it might not seem readable the first time, but it’s a very expressive language syntax that saves several lines of code.
Reload your page. Now you should be able to add notes and they will be there every time you reload or open a new tab. But if you edit an existing note, these changes won’t be saved. This is because we need to set up a watcher.
Vue watchers provide a way to track changes in data and react to it somehow. In our case, we want to save notes every time the body of a selected note is changed. Here’s how we do it.
Update the page. Now you can type anything and it will be immediately stored in Chrome. Open a new tab, reload the browser, and it will still be there.
!Sign up for a free Codeship Account
Then guess what? We’re going to make a component! Here’s how it will be used:
(Replace our regular textarea with this snippet)
So what’s important here? This part:
And then this part.
, you need both of these things. They are the key.
This is all we need. So now we have a fully functional notes manager, which works perfectly well in a browser. But there’s still one thing that I want to talk about.
We’ve come to the understanding that proper transitions and animations are an essential part of any decent website. Vue gets it perfectly right and the documentation talks in detail about specifics and best practices. Let’s see how we can make the selected note appear and slide down from the top. Turns out this is very easy.
. So all we need to do is to wrap our element with it.
That’s it. Try to update the page now and switch to different notes.
So finally we’ve created our Chrome extension so that we can add notes right into our new tab page. We also learned a few things along the way:
I hope that by this time you are starting to feel that extraordinary power that Vue.js puts in your hands.
This is just a start.