meal-prep

Repository for freeCodeCamp's
'How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase' series.

Part 1: How to install Vue and build an SPA using Vuetify and Vue Router
Part 2: learn how to use Vue Router with your SPA
Part 3: learn how to use Vuex and access the API to get your recipes
Part 4: learn how to use Firebase to add authentication and a cart

$ npm install -g @vue/cli
$ vue create meal-prep

Vue CLI Options

Preset: Manually select features
Features needed for project: Babel, Router, Vuex, Linter
Use history mode for router: Yes
Linter / formatter config: Prettier
Additional lint features: Lint on save
Config file placement: In package.json

$ npm run serve
$ vue add vuetify

vue-cli-plugin-vuetify Options

Preset: Configure (advanced)
Use premade template: No
(Chose default for remaining options.)

$ npm run lint
$ touch ./src/components/TheNavigation.vue

Adjustments

• Numerous breaking component changes between Vuetify 1.x and 2.x.
• Needed to add Google's Material Icons CDN URL to index.html.

$ touch ./src/views/Menu.vue
$ touch ./src/views/Signin.vue
$ touch ./src/views/Join.vue
$ npm install axios
$ npm install firebase --save
$ touch ./src/firebase/index.js