Layout

Question 1

How would you add a component to each page in a Nuxt.js app?

Answer 1

Enter the component into an element within the of the default.vue file within the “layouts” directory

Question 2

How is the “head” information given from a “page” component?

Answer 2

export default {
  head() {
    return {
      title: 'title',
      meta: [
        {
          hid: 'unique-identifier',
          name: 'meta-name',
          content: 'content-description'
        }
      ]
    };
  }
};

Question 3

Which directory would you put CSS preprocessor (i.e. SASS or PostCSS) files?

Answer 3

Assets

Question 4

What does the “Nuxt” element in layouts > default.vue represent?

Answer 4

The current page is inserted as that element

Question 5

How do you add a component permanently to a default Nuxt.js page?

Answer 5

Add the component to the template within layouts > default.vue

Question 6

How should partial components of a default vue page be organized?

Answer 6

Create a directory within layouts: layouts > partials > {components}

Question 7

Where do you define the global CSS stylesheet?

Answer 7

In nuxt.config.js, under the “css” array object, add ‘@/assets/css/main.css’

Question 8

How is a Google font added to your global stylesheet?

Answer 8

In nuxt.config.js, head > link > { rel: ‘stylesheet’, href: ‘(google_font_href_uri)’ }

Question 9

In Nuxt.js, how do you account for meta data on dynamic pages?

Answer 9

Use “this” to refer to the specific element that the dynamic page revolves around (i.e. user specific homepage)