Brijpal Sharma
nuxt js
Publish on:-September 05th, 2020 ,
Category:- Web Development
Brijpal Sharma
nuxt js
Publish on:-September 05th, 2020 ,
Category:- Web Development
Basically Nuxt.js is the framework of Vue JS. Yes, this a framework of Vue. But Why need this lets me explain.
In this Vue Js, many things are shuffle and not a proper page for routes. Nuxt.js helps you write universal apps more simply. Here some benefits of Nuxt.js.
1. Create universal apps easier.
2. A Great project structure by default
3. Easily set up routes for pages and many other benefits.
4. SEO Improvements
So Let's start to build an awesome Nuxt.js App.
Run a simple command to create a NuxtApp.
npx create-nuxt-app nuxtapp
it takes some time. based on your internet speed.
During creating a new Nuxt.js project asking some project information such as project name (if you want to change), programming language, package manager, UI framework, and much other information.
After successfully create a Nuxt.JS Project. go to the file directory.
cd nuxtapp
Run the Nuxt application using the following command.
npm run dev
By default, it runs on //localhost:3000/
Now open your NuxtJs project file in the favorite editor. such as visual code and sublime. what you want. and let's change the home page text.
open pages/index.vue file and replace the code with flowing code.
<template>
<div >
<h1>Hello, CoderMen</h1>
</div>
</template>
<script>
export default {}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family:
'Quicksand',
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
and Result will be.
Let's add some pages into the pages folder such as about.vue and contact.vue.
about.vue
<template>
<div>
<b-container class="bv-example-row">
<b-row>
<b-col>
<h1>About Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {}
</script>
contact.vue
<template>
<div>
<b-container >
<b-row>
<b-col>
<b-form @reset="onReset" >
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="text"
type=email
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-2"
label="Enter Your Message"
label-for="input-2"
>
<b-form-textarea id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="text"
required
placeholder="Enter name"
></b-form-input>
</b-form-textarea>
</b-form-group>
<hr>
<b-button type=submit variant="primary">Submit</b-button>
<b-button type=reset variant="danger">Reset</b-button>
</b-form>
</b-col>
<b-col></b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
}
</script>
Now we can easily navbar and use pages(about and contact) by the route. To add a bootstrap-vue navbar visit this site bootstrap-vue.org.
layouts/default.vue
<template>
<div>
<b-navbar type="dark" variant="dark">
<b-navbar-nav>
<b-nav-item :to="{ name: 'index'}">Home</b-nav-item>
<b-nav-item :to="{ name: 'about'}">About Us</b-nav-item>
<b-nav-item :to="{ name: 'contact'}">Contact Us</b-nav-item>
</b-navbar-nav>
</b-navbar>
<Nuxt />
</div>
</template>
<script>
export default {
}
</script>
Visit this URL for about page.
Here I create two pages and use it into the navbar you can create more. when you create a page NuxtJs automatically create a route into .nuxt/router.js file.
So, this was the route of NuxtJs it's so simple and structural. hope you understand the route in NuxtJs.
To run API we use Axios, so first, we need to install in your NuxtJs app using the flowing command.
npm install @nuxtjs/axios
After successfully add Axios into nuxt.config.js
modules: [
// Doc: //bootstrap-vue.js.org
'bootstrap-vue/nuxt',
'@nuxtjs/axios'
],
After That update, your index.vue file with this flowing code.
<template>
<div>
<b-container >
<b-row>
<b-col>
<div v-for="blog in blogs" :key="blog.id">
<div >
<n-link :to="`/posts/${blog.id}`"><h1>{{blog.title}}</h1></n-link>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
blogs: [],
}
},
asyncData ({ $axios }, callback) {
$axios.get('//jsonplaceholder.typicode.com/posts')
.then((res) => {
callback(null, { blogs: res.data })
})
}
}
</script>
The result will be to show something like this.
Now create a new file with blogs/_id.vue. and add this flowing code for the open blog post.
<template>
<div>
<b-container >
<b-row>
<b-col>
<div >
<div >
<h1>{{posts.title}}</h1>
<p>{{posts.body}}</p>
</div>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
posts: [],
}
},
asyncData ({ $axios ,route }, callback) {
// $axios.get(`/api/blog/${route.params.id}/${route.params.slug}`)
$axios.get(`//jsonplaceholder.typicode.com/posts/${route.params.id}`)
.then((res) => {
callback(null, { posts: res.data ,loading: false })
})
}
}
</script>
The blog details will be to show like this
So, as we can create more pages use the route to visit and we can use API to get data from Live API. So here we completed the blog on Nuxt JS Tutorial For Beginners Step by Step. if you have some doughts ask in the comment box.
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
You must be logged in to post a comment.