nuxt3 basics and rendering

 build an app in nuxt3 from scratch

use new nuxt ui component library 

vue3 and 

nuxt3

what is nuxt 

build on vue,

overcome spa problems

why do we need nuxt

spa

seo 

website containes so many information 

nuxt providers data for seo by 

generating the content on the srever side and sending fully rendered html to the templates

generating static html pages

ssr

server side rendering

client request to server

ssr renders the page in real time 

because in real time (it alwyas upto date)

ssg -> staic site generation

renders at build time

no rendering in real time

speed html is already renders

security no api or database connections at logins

for normal vue applicaitons u have to do so much manully configuartion 

for nuxt app=> it alread inbvuild nuxt app, vue router, vue meta

routes

nuxta app => genreat urls based on pages ( but in vue we have to write in router.js)

custom layoot

product pages for one layout

computer with ndode 

vuejs familiarity

code editors

tutorial v  cringewrorth dad jokes

installation and confguration

npx nuxi@latest init

npm install

npm dev -- -o

by default nuxt3 wit vite

npm install 

npm run dev -- -o

it opens inp browser

in app.vue

<template>

<div>

<NuxtWelcome />

</div>

</template>

replace above like below

<template>

<div>

<h1> welcome to my nuxt3app</h1>

</div>

</template>

layouts and pages 

layout 

create custom layout then assign to particular component

based on pages folder it creates router path names

creating url structure for pages

simple about page

mysite/pages/about.vue

coinlore has api to 

home 

details 

in app.vue

<template>

<NuxtLayout>

<NuxtPage/>

</NuxtLayout>

</template>

mysite.com/currency/{id}

pages/index.vue

pages/currency/[id].vue

[id].vue for dynmaic routing

now we will develop one nav bar layout

create layout directory

then 

create default.vue

then paste below 

<template>

<nav>

<NuxtLink to="/">Home</NuxtLink>

</nav>

<main>

<slot />

</main>

</template>

nuxtlink is inbulit route directory

no need of importing anyother

slot is syntax 

showing content in this slot 

afater u saved

stop and re run

creatr server

api directory

[...].js

/server/api/[...].js

with in the page past the following line

export default defineEventHandler((event) => {

return $fetch(`https://api.coinlore.net${event.node.req.url}`)

})

{event.node.req.url dynamic

go to index.vue

<script setup>

import { useFetch } from 'vue-fetch-plugin';

const { data } = useFetch('/api/tickers?limit=10');

</script>

<template>

<main>

<h1>Index Page</h1>

<table border="1">

<thead>

<tr>

<th>Name</th>

<th>Symbol</th>

<th>Price</th>

<th>Details</th>

</tr>

</thead>

<tbody>

<tr v-for="currency in data" :key="currency.id">

<td>{{ currency.name }}</td>

<td>{{ currency.symbol }}</td>

<td>{{ currency.price_usd }}</td>

<td>

<NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>

</td>

</tr>

</tbody>

</table>

</main>

</template>

index.vue remodified like below

<script setup>

import { useFetch } from 'vue-fetch-plugin';

const { data, error, isLoading } = useFetch('/api/tickers?limit=10');

</script>

<template>

<main>

<h1>Index Page</h1>

<table border="1">

<thead>

<tr>

<th>Name</th>

<th>Symbol</th>

<th>Price</th>

<th>Details</th>

</tr>

</thead>

<tbody>

<tr v-for="currency in data" :key="currency.id">

<td>{{ currency.name }}</td>

<td>{{ currency.symbol }}</td>

<td>{{ currency.price_usd }}</td>

<td>

<NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>

</td>

</tr>

</tbody>

</table>

</main>

</template>

no need of import usefetch its a inbult compoent 

<script setup>

const { data } = await useFetch('/api/tickers?limit=10');

</script>

<template>

<main>

<h1>Index Page</h1>

<table border="1">

<thead>

<tr>

<th>Name</th>

<th>Symbol</th>

<th>Price</th>

<th>Details</th>

</tr>

</thead>

<tbody>

<tr v-for="currency in data['data']" :key="currency.id">

<td>{{ currency.name }}</td>

<td>{{ currency.symbol }}</td>

<td>{{ currency.price_usd }}</td>

<td>

<NuxtLink :to="'/currency/' + currency.id">{{ currency.id }}</NuxtLink>

</td>

</tr>

</tbody>

</table>

</main>

</template>

go to currency/[id].vue

<script setup>

const route = useRoute();

const { data } = await useFetch('/api/ticker?id=' + route.params.id);

const coin =data.value[0];

</script>

<template>

<div>

<h2>{{ coin.name }} Detail page</h2>

<table border="1 px solid">

<thead>

<th>Symbol</th>

<th>Rank</th>

<th>Price - US $</th>

<th>Market Cap - US $</th>

</thead>

<tr>

<td>{{ coin.symbol }}</td>

<td>{{ coin.rank }}</td>

<td>{{ coin.price_usd }}</td>

<td>{{ coin.market_cap_usd }}</td>

</tr>

</table>

</div>

</template>

=

netlify

clone from github

import from git

authroise wit nutlify

=

https://www.vuemastery.com/courses/rendering-revealed/rendering-revealed-preview

rendering revealed

ssr

csr (client side renderign)

isr 

ssg (static site generation)

esr

dsg

rsc

what is the best solutin which type of rendering is best

in the yer 1990

paint

 we used paint at computer

but at 1994 for static html site 

fixed html pages

mostly geocities.com

mpa 

multi page applicaiton 

have different urls

each url visited means request server 

show that in ui

for large ecommercei or real esaate above is not suitable

wikipedia => mpa best 

2004 => spa => dynamic responsive web application => gmail

2008=> iphoine and anroid => mobile app revoluton 

2009 => mpa to spa => twitter

spa

index.html entry point

load resource 

client side navigation 

feedback

whatever page visited it hav to download that total pag at ui 

because fo this load takes time

to 

2010

spa framweork 

angular

2013 react by facebvook ( instagram, netflix)

2014 ( alibabi, gitalb, mi)

2018 next for eact

2018  nuxt fpr vue

ssr 

browser requestes webpage , it request sthe serve

thenit built 

the page

then sends rendered html along with javascript to ui browser

javascript executed eventlisters vue to dom

because of this speed increase, then seo good

social sharing preview also possible

breaking news (latest published sites)

live sports

personalised e commerce

nuxt generate 

ssg it will develop this

drawback ( large sites it ake to build long time to build)

we suited 

for portfoloi

documentation 

spa+ssg => caching rules per route

swr statle while revalidate

ist time visit, build then stored in cache

swr:3600 

reset cache then regenrate the site after 600

isr incrimental static generation

isr:3600

 

bvased ont he pages 

suspense enables streaming

2021 => astro.js

differengt frameworks wiuth one js

finlaised