Vue

Question 1

What would an import statement look like at the start of a .vue script tag? Importing axios for example?

Answer 1

import axios from ‘axios’;

(Single or double quotes work here)

Question 2

How do you initialize the main data structure in a Vue script tag?

Answer 2

export default {
name: “name”,
data() {
returns {
id: null,
name: null
}
},
created() {

},
methods: {
async getData() {

  },    }, }

Basically if it’s data() or created() or something that’s like a function, make it a function. Otherwise, make it an object filled with things. Methods is an object filled with functions.

Question 3

What is a CLI?

Answer 3

Command Line Interface

Allows tedious project files to be handled for you like package.json and whatnot

Question 4

When fetching an object from a node/express api connected through axios, how should you assign the data?

Answer 4

let response = await axios.get(‘/api/portfolio’, this.inputs);
this.items = response.data;

You should assign it to the response variable first because the api call doesn’t just return the data. It has a bunch of other info with it. You wouldn’t be able to use response[0] to get the object you’re looking for. So assign response.data to whatever variable you’re looping through or needing. (May be some exceptions…)

Question 5

What do you need to include with a v-for loop?

Answer 5

You need to include a key, so v-bind:key=”item.id” or just :key=”item.id”

The key should be a unique id as well because the key shouldn’t have duplicate values, which is possible in something like a name or title.

Question 6

How do you initialize a v-for loop inside an html element? How do you access each item in the array you loop through? How do you assign a video name to a video source?

Answer 6

v-for=”item in this.items”

Inside elements, you can use {{ item.name }} for example to print that particular field.

For a video, it’s a little complicated. You need to navigate to the right folder inside the quotes and then add the video name using the item, so:

<video :src=”require(‘@/assets/’ + item.vidPath)” type=”video/” controls>

The @ symbol represents the root folder for the project, so the src folder in the case of a vue project.

Question 7

How do you link an HTML element value to a value defined in your script? How would you utilize this to edit database items?

Answer 7

Use v-model. When the value of that HTML element changes, it will also change the variable you’ve linked it to.

<input></input>

If you are wanting to edit something in a database, call the api to fetch the item/items, assign the variables the appropriate data, which will appear in the HTML because it is bound both ways. Then change the info and call an update api function apply the changes in the database.

Question 8

How do you add font awesome icons to your vue project, and how do you use them?

Answer 8

npm i –save @fortawesome/fontawesome-svg-core
npm i –save @fortawesome/free-solid-svg-icons
npm i –save @fortawesome/free-regular-svg-icons
npm i –save @fortawesome/free-brands-svg-icons

npm i –save @fortawesome/vue-fontawesome@latest-2

(use latest-3 for vue 3)

Then in src/main.js, add these lines of code if you wanted the faUserSecret icon:

/* import the fontawesome core */
import { library } from ‘@fortawesome/fontawesome-svg-core’

/* import font awesome icon component */
import { FontAwesomeIcon } from ‘@fortawesome/vue-fontawesome’

/* import specific icons */
import { faUserSecret } from ‘@fortawesome/free-solid-svg-icons’

/* add icons to the library */
library.add(faUserSecret)

/* add font awesome icon component */
Vue.component(‘font-awesome-icon’, FontAwesomeIcon)

Then it will look like this implementing it into the project:

Question 9

How do you purge tailwindcss styles so your web page runs faster?

Answer 9

module.exports = {
purge: [
‘./src//.html’,
‘./src/**/.vue’,
],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
plugins: [],
}

This is how the file should look in the purge section…

Question 10

How do you make a new vue project with git bash that wil

Question 11

How do you include meta data specific to each vue route?

Answer 11

npm install vue-meta

Then you need to put this in the main.js file:

import VueMeta from ‘vue-meta’

Vue.use(VueMeta)

Then put something like this in all of your views:

export default {
components: {
ContactForm,
},
metaInfo: {
title: “Pricing - Performance Marketing Agency”,
meta: [
{
name: “description”,
content: “Check out our base pricing and request a custom quote for your specific needs.”,
},
{
name: “keywords”,
content: “pricing, custom quote, performance marketing agency”,
},
],
},
};

Remember to run npm install vue-meta when you send it to the server as well or else it won’t work.