Syntax

Question 1

What command initializes a new Nuxt application?

Answer 1

npx create-nuxt-app (project_name)

Question 2

Which casing style is used for string templates?

Answer 2

PascalCase

Question 3

Which casing style is used for DOM templates?

Answer 3

kebab-case

Question 4

What snippet is used to create a basic template, export, style setup for a fresh vue file?

Answer 4

“default” from the “vue” extension in VSC

Question 5

How do you link between pages in Nuxt.js?

Answer 5

“nuxt-link” element with a “to=’/path/to/file’”

Question 6

What are the 5 things required to incorporate a component into another file?

Answer 6

1. Create the component
2. Name the component using “name: ComponentName” in the export object
3. Write an import statement in the parent Vue file (i.e. import Component from ‘./partials/component’)
4. Add it to the component object in the parent vue file
5. Create the custom element in PascalCase within the parent Vue file’s template
   * 6. (Depending) Pass properties to the child component who receives them within a “props” object

Question 7

In Nuxt.js, what are the three things necessary to add a meta tag?

Answer 7

1. “hid”, which is used as a unique identifier
2. “name”, which is the name of the meta tag
3. “content”, which defines the content of that meta tag

Question 8

What does the “head” section of nuxt.config.js do?

Answer 8

Sets up default head data for each page

Question 9

In Nuxt.js, how do you overwrite default “head” data for a specific page?

Answer 9

Add a head function to the “export default” statement within the specific file and use the same “hid” property of any corresponding meta tags in the default head data

Question 10

In Nuxt.js, how would you import Axios to a Vue file?

Answer 10

In the script tag, add the following import statement:

import axios from “axios”;

Question 11

In Nuxt.js, how do you access a variable within the data() function?

Answer 11

this.objectName

Question 12

In Nuxt.js, how do you access a URL parameter and display it on the page?

Answer 12

{{ $route.params.param_name }}

Question 13

In Nuxt.js, how would you create a new page for each item in a list based off of a template Vue file?

Answer 13

1. Display the list in the page using a v-for loop and :key
2. Create a nuxt-link for each item in the list with the following syntax:
   nuxt-link :to=”‘directory’ + keyParamName”
3. Create a subdirectory in the directory being linked to with this syntax: “_keyParamName”
4. Create an index.vue file that will serve as the template

Question 14

In Nuxt.js, how would you run server-side only code?

Answer 14

add the following to nuxt.config.js after the headsection:
serverMiddleware: [
“~/path/to/api/middleware”
],