Build a Shoppinglist Webapp with Vue, Vuetify and Firebase

Part 1: Setting up Vue and building a list app with basic functionality

In this series we are going to build a shoppinglistapp with Vue, Vuetify and Firebase. I’m going to show you how to set up Vue with Firebase as a database and for hosting our app and how to add Vuetify for ready to use components. Part one is all about getting familiar with the the basic parts and creating a local list where we can add and remove items.

For the finished project files of part 1 just go to you terminal and enter

git clone git@github.com:RobertWade/Shoppinglist.git

or head over to https://github.com/RobertWade/Shoppinglist and download the files there. Navigate into the folder from your terminal with cd Shoppinglist and run npm install or yarn. After the installation is finished just enter npm run serve or yarn run serve. Be aware I already removed a couple of files that are not needed anymore.

Prerequists:

Step 1 — Open up the terminal

On Mac Press Command+Space and search for terminal. On Linux Press Ctr+alt+t and on windows open up gitbash

Sceencapture of the searchbar with the terminal

Step 2— Install Vue Cli and create a project

In the terminal enter on of the following commands

https://cli.vuejs.org/guide/installation.html

After you’ve installed the Vue Cli you can create a new project. Lets call it hello-world

https://cli.vuejs.org/guide/installation.html

You will now be asked to pick a preset or Manually select features. Choose Manually select features to create a new webapp.

Screenshot from the terminal settings of the vue cli

After selecting it a couple other selections should pop up. These are the standard things I choose for most of my project with space you can select them and then just hit enter to confirm.

Now we would like to use the history mode for our project so enter Y and hit enter. This option will make your app into a single page application which will require proper server setup but we are going to worry about that later.

Just a few more things and we can start to get our hands dirty. Just hinter enter on the next few options. We are going to choose Sass with Dart, ESLint with error prevention only, Lint on Save and place configs in dedicated config files.

Now that we’ve done all the setup things you should see something like this. On the terminal you can change the directory with cd hello-world and then start by typing yarn serve or npm run serve. Now your webapp should be served to the local host.

Open your browser of choice and type localhost:8080 this is were the Vue Cli will host your page. You should see something like this.

Now open the Editor of your choice and search for the folder you just created.There are two main files we are going to look at first, main.js and App.vue.

Main.js is where we are importing vue and where the app gets rendered to the DOM in our browser. This is the Place where we import things like our Router to navigate through the app, the store to have our app data in one place and any other package we are going to use can be imported here.

App.vue is our anchor in regards of our vue files and components. This is the top level vue file where we have our navigation for the app .

<router-view> is the element where our views get rendered. If you open up the views Folder and click on Home.vue you are going to see the initial View that gets rendered in your browser.

Vue files are seperated into three parts:

1.<template></template> is where all your html elements will go. This is were we use components and put them in the DOM.

2.<script></script> is where all our Javascript logic will go. This is the place to import Components, or set data that is needed, also our methods will go in there.

3.<style></style> is the last part and this is where all our styling for the application will happen, all the Css will go in there.

Why does the Home view get rendered and not anything else? Because of router.js. This is the place where we tell our vue application at which route which component should be served in the <router-view>. As a default we import Home in Line three and then set it as a route for path:’/’ in line 13. This way our standard landing page is the Home view.

If you go to your browser and type localhost:8080/about Vue will notice the change and go to the path:’/about’ which we import from line 17–24. As you see this import is a little different because we are doing something called lazy load to only load the page when it is visited. Now that we are on the about page we no longer see the vue logo but instead we see “This is an about page”. Notice that the navigation is still there? That is because our top level App.js still has the navigation on top of every other view. So only the part below the navigatiomn will change.

Now that we have a brief overview what the main files that we need are we are going to add our own view and change the navigation to a mobile navbar like the one from instagram.

First things first we are going to add Vuetify to our project to get some ready to use components. Go back to you terminal and type bom instal vuetify or yarn add vuetify (Take a look at their documentation at https://vuetifyjs.com/en/components/api-explorer).

Remember where I told you we are going to import all other packages? Head back to your editor and into main.js to add Vuetify to our app. Notice the changes in Line 2,7 and 9 we import Vuetify, the vuetify css and tell vue in line 9 to use it.

Also head over to the index html to add the css for Icons at line 9 with

<link href=’https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel=”stylesheet”>

You can find a set of all material icons at https://material.io/tools/icons/?style=baseline

Now you are able to use vuetify components anywhere in the project. We can check if it works at App.vue. Just swap the navigation for v-bottom-nav (https://vuetifyjs.com/en/components/bottom-navigation) and remove the #app from the style because we dont need it anymore.

You should now see the bottom navigation in your

Now lets go to Home.vue and remove everything between <div class=”home”></div> and also all the imports and add our list to the template. There is a lot that has happened here so let me explain first. We add v-list to get a wrapper for all our list-tiles these list tiles we’d like to display on our app. in the Script part of our app we have data that contains an array of items (Line 22) in line 4 we loop over these item with v-for and display a v-list-tile for every item that is in the list. Every v-list-tile contains two parts, the first is v-list-tile-content where we display the item with {{item}} also I like to display the location of the array with {{i}}. These curly brackets are the basic sysntax to display data in vue. (For more explenation go to https://vuejs.org/v2/guide/ and head over to loops and conditional rendering).

The second part is v-list-tile-action. This is were we put an icon <v-icon>remove</v-icon> this tells our vue application that we like to render out the material Icon for remove which is a trash can.

Also with @click you add click methods to your elements. In this case I have a method called remove(i) that takes in the position of our list tile and passes it to the remove function in line 25. The remove function makes a copy of the list in line 26 and then creates a new list. In case you are not familliar with ES6 this is the basic immutable way to remove an item from an array. I copy everything from 0 till the position of the clicked item and then also everything after it. So we get a new array without the clicked listitem. After creating the array I reasign the new list to items in data so our list gets updated.

After you’ve added all the things you should now be able to see the following list:

We’ve succesfully rendered a list with 3 items. The list starts with 0 because arrays start at the position 0. You are now able to click on the trash can to remove an list item. Changes are not permanent at the moment so if you reload the page all our items will be displayed again.

Now we’d like to also add Items to the list as well. For that we add v-text-field in line 10. There are a couple of new things here. V-model binds a value from our textfield to the data area in line 28. We also add a click method to our text field this time we tell vue that we have an appended Icon from which we like the click method to be triggered from. Solo givs the textfield a certain vuetify styling so it’s not neccessary in the moment. The label tells vue what the textfield will contain if nothing is entered yet and append-icon adds a matterial icon to the end of the text field.

Now in line 39 we add the addItem() function. This function uses the power of ES6 as well. We copy the list and create a new list with const newList = []. Now we use the spread operator again to copy everything into the array that is already there plus the newItem from our data. At the end we reasign the newList to the items and now we are done.

Congratulations you are now finished with the first part of the series. You should now see the app rendered in the browser. By entering something in the textfield and clicking on the plus you should be able to add items to the list and also remove them by clicking on the trashcan.

As this tutorial is going to be a bit longer I’m going to publish the next piece somewhere in the next weeks. Here are some link if you’d like to read further.

I will also update these articles so if there is anything in the process that is not clear. Just ask and I will be happy to answer your questions and update this article.

Fallen in love with vue but need some reasons for your boss to give vue a try?