Nuxt project
example: Need to create new project as my first article. We go to on the pages folder and create new
page name as about.vue, as:
<template>
<div class="container">
Something your content…
</div>
</template>
<script>
import NuxtMountains from "../components/NuxtMountains.vue";
// import
your component as above and call as export default section
export default({
components: { NuxtMountains },
head: {
title: 'About us page title',
meta: [
{
hid: 'About us',
name: 'description',
content: 'About us description'
}
],
},
data() {
return{
boxSelectedA: false,
boxSelectedB: false,
}
},
computed:{
boxClassesA(){
return {active:this.boxSelected}
}
},
methods:{
boxSelected(box){
}
}
})
</script>
<style>
/* your css will come here*/
h1 {
font-family: Roboto, sans-serif;
}
</style>
Page has
template tag: where we can add our html code but we need to parent container,
same as on React used to parent container, script tag: we can import our
component and export same component data, methods and all lifecycle methods.
Also has style tag: we can write all css, also we can write with sass.
Now go to
create another pages. Need to create routing, it’s more easy as:
<ul>
<nuxt-link to="/">Main page</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<NuxtLink to="/services">services</NuxtLink>
</ul>
We do wirte “nuxt-link”
or “NuxtLink” both are corrected. If we use nuxt link, your page will not be
refresh. Also we can give link normal as html “href” it will work but when new
page load then you will find your page refresh.
Now we move
on the about NUXT Component: We create a file on the “components” folder as “NuxtMountains.vue”.
Now add template important things as
above mention. We need to import component as :
<script>
import NuxtMountains from "../components/NuxtMountains.vue";
export default({
components: { NuxtMountains },
})
</script>
Now call component in the template section as below:
<nuxt-mountains/>
<!-- <nuxt-mountains></nuxt-mountains> -->
Both are correct, according to your requirement. And also you want to
use any API Data, so it’s very easy code as below:
<script>
export default {
data() {
return {
yourArrayName: []
}
},
async fetch() {
this.yourArrayName = await fetch(
'https://api.yourapi.com/apiName'
).then(res => res.json())
},
loading: {
color: '#ccc',
height: '10px',
width: '10px',
}
}
</script>
For the dynamic content we need to add : before attribute.
<img :src="mountain.image" :alt="mountain.title"/>
<p v-for="arrydata in arrayName" :key="yourkey">{{ arrydata }}</p>
For the dynamic CSS we need to add : before attribute.
<div class="dottedbox" :class="boxClassesA" @click="boxSelected('A')">A</div>
<div :class="{dottedbox:true, active:boxSelectedB}" @click="boxSelected('B')">B</div>
Full project details:
about.vue
<template>
<div class="container">
<h1>About us</h1>
<p>About content will come</p>
<div class="Link-section">
<ul>
<nuxt-link to="/">Main page</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<NuxtLink to="/services">services</NuxtLink>
</ul>
tetst
</div>
<nuxt-mountains/>
<!-- <nuxt-mountains></nuxt-mountains> -->
</div>
</template>
<script>
import NuxtMountains from "../components/NuxtMountains.vue";
export default({
components: { NuxtMountains },
head: {
title: 'About us page title',
meta: [
{
hid: 'About us',
name: 'description',
content: 'About us description'
}
],
},
})
</script>
dynamiccss.vue
<template>
<div>
<h1>Dynamic Class</h1>
<!-- <div class="dottedbox" :class="{dottedbox:true, active:boxSelectedA}" @click="boxSelected('A')">A</div>
<div class="dottedbox" :class="{dottedbox:true, active:boxSelectedB}" @click="boxSelected('B')">B</div>
<div class="dottedbox" :class="{dottedbox:true, active:boxSelectedC}" @click="boxSelected('C')">C</div> -->
<div class="dottedbox" :class="boxClassesA" @click="boxSelected('A')">A</div>
<div :class="{dottedbox:true, active:boxSelectedB}" @click="boxSelected('B')">B</div>
<div :class="{dottedbox:true, active:boxSelectedC}" @click="boxSelected('C')">C</div>
</div>
</template>
<script>
export default({
data() {
return{
boxSelectedA: false,
boxSelectedB: false,
boxSelectedC: false,
}
},
computed:{
boxClassesA(){
return {active:this.boxSelected}
}
},
methods:{
boxSelected(box){
// for the Selecting
/* if(box==='A'){
this.boxSelectedA = true;
}else if(box === 'B'){
this.boxSelectedB = true;
}else if(box === 'C'){
this.boxSelectedC = true;
}*/
// for the toggle
if(box==='A'){
this.boxSelectedA = !this.boxSelectedA;
}else if(box === 'B'){
this.boxSelectedB = !this.boxSelectedB;
}else if(box === 'C'){
this.boxSelectedC = !this.boxSelectedC;
}
}
}
})
</script>
<style>
.dottedbox{
border:2px solid #ccc;
width: 200px;
height: 100px;
margin: 10px;
}
.active{
border:2px solid #f00;
}
</style>
(components)NuxtMountains.vue
<template>
<div class="mountains-container">
<p v-if="$fetchState.pending">Fetching mountains...</p>
<p v-else-if="$fetchState.error">An error occurred :(</p>
<div v-else>
<h1>Nuxt Mountains</h1>
<ul>
<li v-for="mountain of mountains" :key="mountain.height">
<div class="mou-image"><img :src="mountain.image" :alt="mountain.title"/></div>
<div class="mou-title">{{ mountain.title }}</div>
<div class="mou-date">{{mountain.updatedAt}}</div>
<div class="mou-country">
<p v-for="country in mountain.countries" :key="country">{{country}}</p>
</div>
<div class="mou-date">{{mountain.height}}</div>
<div class="mou-description">{{mountain.description}}</div>
</li>
</ul>
<button @click="$fetch">Refresh</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
},
loading: {
color: 'blue',
height: '5px'
}
}
</script>
(components)loadingBar.vue
<template>
<div v-if="loading" class="loading-page">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start() {
this.loading = true
},
finish() {
this.loading = false
}
}
}
</script>
<style scoped>
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
text-align: center;
padding-top: 200px;
font-size: 30px;
font-family: sans-serif;
}
</style>
services.vue
<template>
<div class="container">
<h1>Service</h1>
<div class="Link-section">
<ul>
<NuxtLink to="/">Main page</NuxtLink>
<NuxtLink to="/about">About</NuxtLink>
<NuxtLink to="/services">Services</NuxtLink>
</ul>
</div>
<hr>
<p>Service content will come</p>
</div>
</template>
<script>
export default ({
})
</script>
<style>
h1 {
font-family: Roboto, sans-serif;
}
</style>
pagenotfound.vue
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<p>page 404</p>
</div>
</template>
<script>
export default {
props:['error'],
layout:'error'
}
</script>
No comments:
Note: Only a member of this blog may post a comment.