Create a Nuxt App (beginner)

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-nuxt

Then configure the project :

Terminal : project configurations

Go to your project :

cd name-of-your-project

To see the project in a browser :

yarn dev

Then 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>
Header component

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>.

View of project on http://localhost:3000/

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
A warning on my terminal

To avoid errors install the old version of sass-loader :

yarn add sass-loader@10.1.1

Add to tag<style>the attribute lang="scss" and now you can use Sass in the project :

Add lang attribute to use Sass

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.

default layout

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.

NuxtLink with to property

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 style when a nuxt-link is active
Add style when a nuxt-link is 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.

  1. 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>
How to insert images

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”],
}
},
Add path and icons in nuxt-config

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>
How to add icon in a component and look of package.json
Final result

New in developpment. I want to learn about Javascript, React and Vue. I try to improve myself 🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store