vue-frontend-instructions.md

Setting up a Vue app

1. Run vue create to make a new Vue app, and manually select features:
   • Router
   • Vuex
   • CSS Pre-processors / SCSS
   • Unit Testing / Mocha + Chai
   • E2E Testing / Cypress
   • Dedicated config files
2. Clean up files:
   • Delete all routes
   • Delete the boilerplate content in App.vue (keep the router-view)
   • Delete the generated views
   • Delete the generated component
   • Update the content of index.html to the actual name of your app
   • Update the favicon.ico
   • Delete the generated unit test and e2e test
3. Add an icon font to your index.html
4. Create a src/styles folder, and add the following files to it:
   • _colors.scss
   • _typography.scss
   • _resets.scss
5. Add a suitable color pallete to src/styles/_colors.scss
6. Add a primary header and body font mixin to src/styles/_typography.scss
7. Add the Meyer reset to the src/styles/_resets.scss, add add the following fixes to it:
   • Box sizing
   • Link color
8. Import your resets in the App.vue file
9. Add .env to .gitignore
10. Run npm run build to generate the app
11. Create a new firebase project
12. Run firebase init and set the deployment directory to the dist folder
13. Deploy

Adding a static page to a Vue app

1. Add a view file to src/views
2. Create the template for the view
3. Add styles to the view (scoping, using SCSS, and importing typography and colors as needed)
4. Add a route to src/router.js
   • Name is a descriptive name
   • Path is the URL it should match
   • Component is the view that show up at this route

Accessing data with Vuex

1. Add any sample data you want to start with into the state key in src/store.js
2. Write the code that will manipulate the data as a new method on mutations
3. Write the code that your app will call to trigger the mutation on actions- this includes any network calls
4. Add any computed properties (data that is derived something in your state) for this data to the getters key
5. Write the code to either read data from state or manipulate data with actions in a view (often either the create hook or as part of a method)

Adding a dynamic page to a Vue app

1. Write any relevant e2e tests for your views in tests/e2e/specs
2. Add a view file to src/views
3. Add a route to src/router.js
   • Name is a descriptive name
   • Path is the URL it should match
   • Component is the view that show up at this route
4. Identify any components that will be needed for the page, import them, and add them to the components list
5. Create the template for the view, hard-coding data as needed
6. Add styles to the view (scoping, using SCSS, and importing typography and colors as needed)
7. Identify any data that will need to be retrieved from the store, retrieve it via an action in the create hook, and add it to a method in the computedProperties object
8. Identify any data that will need to be manipulated in the store, and call the relevant actions in a method on the methods object
9. Identify any local state (such as toggling an element) that will be used, and initialize it in the data function
10. Identify any local methods that your template will call, and add them to the methods object
11. Replace your hard-coded data with the dynamic data as appropriate

Adding a component to a Vue app

1. Write any relevant component tests for your app in tests/unit
2. Write any relevant unit tests for your app in tests/unit
3. Add a component file to src/components
4. Identify any components that will be used inside the component, import them, and add them to the components list
5. Create the template for the view, hard-coding data as needed
6. Add styles to the view (scoping, using SCSS, and importing typography and colors as needed)
7. Identify any data that will need to be passed in from the parent view or component and add it to a method to the props object
8. Identify any data or events that will need to be sent outside the component, and emit them from a method on the methods object
9. Identify any local state (such as toggling an element) that will be used, and initialize it in the data function
10. Identify any local methods that your template will call, and add them to the methods object
11. Replace your hard-coded data with the dynamic data as appropriate