Introduction
Hello, I am a junior developer and I encountered difficulties creating my site with Nuxt. I want to share in this article the different steps I followed to create my Nuxt project. I use Sass, Fontawesome, nuxt-link, add image... Hope it can help someone.
Get started
Open your terminal and write :
npx create-nuxt-app medium-nuxtThen configure the project :
Go to your project :
cd name-of-your-projectTo see the project in a browser :
yarn devThen go on this link : http://localhost:3000/
Create a component
To create a Header component, the basic structure of a vue component (vue 2)is : template, script and style.
<template>
<div>
(html code and vue syntaxe for insert data)
</div>
</template><script>
(JavaScript code)
</script><style>
(css code)
</style>
Note : my code editor is Visual Studio Code
I scoped the style, when a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. If you inspect your header code you will see something like that <div data-v-1a9bb128 class=header>.
Use Sass for styles
Open your terminal and install these (if you use npm replace yarn add by npm install) :
yarn add — save-dev node-sass sass-loader
To avoid errors install the old version of sass-loader :
yarn add sass-loader@10.1.1Add to tag<style>the attribute lang="scss" and now you can use Sass in the project :
Default layout
When you want to change the look of your Nuxt.js app you can create custom layout or use the default layout. For example in this project I want to include a header : just include the <Header/> component. The Header will be display on the top of all pages. The <Nuxt/> component will renders the page component.
Routing and Navigation
To navigate between pages in Nuxt it is automatic. To create a page create a file with extension “.vue” in pages folder and add<NuxtLink></NuxtLink>or <nuxt-link></nuxt-link> to navigate between them. Don’t forget to pass the to property with the link of your page.
You can add style when a nuxt-link is active witha.nuxt-link-active and we don’t need to add a class. Sometimes you can need exact path so use a.nuxt-exact-link-active.
Add Image
I have found different ways to insert images into this project. I prefer the first method it’s simple and better for optimization.
- Use require and v-bind (or shorcut “:”)
<img :src=”require(‘../assets/images/logo.svg’)” alt=”Medium logo” />Or like this :
<template>
<img :src=”logo” alt=”Medium logo” />
</template><script>
import Pic from "../assets/images/logo.png";
export default {
name:"Header",
data(){
return {logo: require("../assets/images/logo.svg")}
}
}
</script>
2. Write the path of your image in src
<img src="../assets/images/nuxt.png" alt="logo1" />Write the relative path is generally considered bad practice because when building with Vue CLI, webpack is not able to ensure that the assets file will maintain a structure that follows the relative importing. Webpack trying to optimize and chunk items appearing inside of the assets folder. If you want to use a relative path you should use a path from the static folder :
<img src=”/static/nuxt.png”>3. Import the picture and then use directive v-bind (or shorcut “:”)
<template>
<img v-bind:src=”picture” alt=”logo2" />
</template><script>
import Pic from "../assets/images/logo.png";
export default {
name:"Header",
data(){
return {picture: Pic}
}
}
</script>
Create styles folder and use styles files
You can import your reset.css or main.scss in your project by adding the path in nuxt-config (look at the picture in the next paragraph).
css: [// a CSS file in project"./assets/styles/reset.css",// a SCSS file in project"./assets/styles/main.scss"],
Insert Fontawesome icons
Install packages with yarn add or npm install.
$ yarn add @nuxtjs/fontawesome
$ yarn add @fortawesome/fontawesome-svg-core$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/free-brands-svg-icons
$ yarn add @fortawesome/free-regular-svg-icons
Add icons in nuxt-config.
buildModules: [“@nuxtjs/fontawesome”],
fontawesome: {
component: “fa”,
icons: {
// list the icons you want to add, not listed icons will be tree-shaked
brands: [“faGithub”],
solid: [“faCheckSquare”, "faCoffee"],
regular: [“faImage”],
}
},
Insert icon with <fa icon="coffee"/> or use different style of icon (regular far, solid fas or brand fab) <fa icon="['fas', 'heading']"/>. Add style like size or color to icon with adding a class.
<fa icon="['fas', 'check-square']" class ="icon"/><style>
.icon {
font-size:20px;
color:green;
}
</style>
