DEV Community

Cover image for How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase (Part 1 of 4)

How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase (Part 1 of 4)

Jennifer Bland on July 20, 2019

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase. Do you want to learn how to use Vue.js? Want to create a...
Collapse
 
yolabingo profile image
T • Edited

Great article. Some tags got eaten though:

All application using Vuetify have to be wrapped with .
...
This code wraps our application in the tag that Vuetify requires. Inside that tag is the tag. Inside that is the tag. The router view tag will display the current page that you are on.

Collapse
 
ratracegrad profile image
Jennifer Bland

Thanks for pointing that out. I have updated the article to fix it.

Collapse
 
raymondcamden profile image
Raymond Camden

I see another "eaten" tag here: Inside the container I will have a .

Thread Thread
 
ratracegrad profile image
Jennifer Bland

Thanks I have updated. Been struggling with writing using markdown so I forget my `` sometimes.

Collapse
 
kievnz profile image
Kevin Bakes • Edited

Hi, I am new to vue and vuetify. I just encountered this :key="divider-${index}\" where it triggers an error. A formatting issue of some sort. Can you fix this, please?

I love this article. Thanks!

Collapse
 
ratracegrad profile image
Jennifer Bland

Kevin, I have updated the code.

Collapse
 
notapatch profile image
not-a-patch • Edited

I was following along and the v-toolbar-side-icon/"hamburger" wasn't appearing. I read that Vuetify 2.0 deprecated it and replaced it with v-app-bar-nav-icon. I made this change and it worked again.

           <v-toolbar-side-icon> -> <v-app-bar-nav-icon> 

Obv, I know nothing more about veutify than can be matched by Googling for 5 mins

Collapse
 
adarshk profile image
Adarsh K.

This Article is really very helpful to understand how can someone use router, store and the main part how to start with Vue itself.

Thanks for this great tutorial.

Note: One thing that is breaking for now is - Vuetify is still not updated itself for Vue3. So I request you to please update that here, I found that while following the initial setup - switched to Vue2 and all is working fine.

Thank you for this - I am able to setup the initial foundation my project.

Collapse
 
raymondcamden profile image
Raymond Camden

Great article. I like Vuetify, but I struggle with the conventions of it. Your article helped clear a bit up!

Collapse
 
ratracegrad profile image
Jennifer Bland

You are welcome. I am flattered you are reading my content!

Collapse
 
mtbisu profile image
Nguyễn Mạnh Thắng

A lot of components and classes are from vuetify/legacy-docs. Someone code along with it should compare with newly vuetify docs. Btw, It's a detailed article for have a good structured project.

Collapse
 
ratracegrad profile image
Jennifer Bland

Ali,

push notifications are in PWAs. I was not demonstrating that in this 4 part article series. I will see about writing a future article about how to create a PWAs with push notifications.

Collapse
 
contractmaple profile image
haltingfrosty

This article has been really helpful in helping me grasp how to utilise a router, a store, and how to start using Vue. eggy car