Nuxt3, an SSR framework for Vue, just hit release candidate last week. Let's take a first look at its most powerful features and compare it to other fullstack JavaScript frameworks like Next.js and Remix. 

#webdev #js #TheCodeReport

🔗 Resources

- Nuxt3 Release https://nuxtjs.org/announcements/nuxt3-rc/
- Nuxt Docs https://v3.nuxtjs.org/getting-started/quick-start
- Vue in 100 Seconds https://youtu.be/nhBVL41-_Cw
- Next in 100 Seconds https://youtu.be/Sklc_fQBmcs

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Nuxt version 3 first look
- Nuxt3 Review
- Nuxt.js vs Next.js
- Server side rendering with Vue.js
- Nuxt.js features overview
- Deploy vue to serverless edge functions
2024-02-04T13:37:36.870Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
087727d1-6a61-4f10-9f48-51697682a299
ad4c83d6c553109b2c9684b152278199919306354a1ebd623f881429e193c720
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is April 25, 2022, and you're watching the Code Report.
After 16 months of hard work, Nuxt.
JS version 3 has finally hit release candidate.
It's been 84 years.
And it was well worth the wait.
It's kind of like the Next JS for view ecosystem and at first glance, the only real difference is just one valve.
But the truth is that Nuxt has implemented some really unique features that are about to blow your mind if you've never used it.
Imagine in a world where every file has access to every component in your project, so you never have to write an import statement ever again.
I never thought I'd in my lifetime, but Nuxt JS figured out a way to handle auto imports in a way that makes total sense.
We'll look at that along with a bunch of other features is over the next few minutes.
1st, we need to talk about its documentation.
When you generate a new project, you get this extremely minimal starting point, and you're left wondering, what do I do next?
Well, just like view itself, this is a progressive framework that can do a lot of different things, like build a single page app, a static site, a server rendered site, a rest API, or all these things together at once.
What stands out in the documentation is that there's a page that corresponds to every directory in your project.
Many of these directories do some magic like Pages, handles all of your routing like Next JS and I really like how the documentation explains what every file and a project will do.
On top of that, it has traditional API documentation as well as a ton of examples with interactive demos.
Now the big core feature of Nuxt that makes everything else possible is a server engine they built from the ground up called Nitro.
It supports SSR and static site generation, but, most importantly, it allows you to deploy on the edge, like on Cloudflare Workers, for example.
That means you're not limited to Node.
Js, and you can literally run server side code all over the world as close as possible to the end user, making your site extremely fast.
But the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered, although this will be supported in the future.
Now, the most important aspect of rendering is how you fetch data on the server.
If we go into a component, you'll notice we have a setup script which contains code that will run on the server.
Now we can fetch data from our API or a database with composables like use async data or more conveniently use fetch.
It makes a request then returns a data value that we can then use directly in the template below.
And, did you notice, I'm using top level await.
That makes things incredibly simple, but we're not going to stop there.
One problem you might encounter with server rendering is sending too much data over the wire.
You can easily filter the properties you need from the object using the pick option, or you can use transform to change the format of the data entirely.
But, what if we want to refresh formed to change the format of the data entirely, but what if we want to refresh this data later?
It also returns a refresh function that we can simply call from the client side template, it also has pending and error objects that we can use in the UI as well.
So, really awesome data fetching capabilities out of the box.
Another thing we might wanna do while we're here just adds some dynamic data to the head of the document.
One way to do it is with the head component in the template, or we can go to our server side script and define it and the use head composable.
That's useful, but one weird thing you may have noticed here is that I'm using these components without importing them from anywhere.
One of the most mind blowing features is auto imports.
Everything in the framework is automatically available to you in any file without an ES import.
On top of that, any code that you define in the composables or components directory is made available on every page automatically.
The only thing I don't like about this is that it makes me wonder how many hours of my life I wasted trying to organize my imports and exports and other projects.
And one other potential issue is name collisions, but it will give you a warning when that occurs.
You might also be wondering if this produces a massive JavaScript bundle, but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page.
Now, let's switch gears to another awesome feature, layouts.
A complex application might have multiple different types of pages, like a blog and an admin area.
Every page can be assigned a layout, which will wrap it with an entirely different UI, and that layout can also have slots where specific pieces of UI can be inserted.
It's just a really practical way to compose a complex UI.
In addition, Nuxt also supports nested routing very similar to the Remix framework for React.
And, that's really cool because it means you can transition different parts of the UI while changing the route without needing to rerender the entire page, and that can be really useful for a dashboard style app.
Yet another challenge you'll face when building a multipage application is state management, like sharing data across multiple pages.
Nuxt provides a useState composable that allows you to define stayed with a shared key.
Its value is preserved after being rendered on the server, and then can be shared across multiple components on the client side.
Another thing we need to talk about is server routes.
Like pages, the file system corresponds to a certain route.
You can add a suffix like git, post, or patch to any of these files to change the HTTP method that is used.
But what's really awesome is that instead of sending a response, you just return a value.
And by doing that, it allows Nuxt to automatically create typings for all of your API routes, which means you get a strongly typed API with almost no effort.
There's tons bought some stuff here, and I could keep going.
But let me know if you wanna see a full Nuxt tutorial in the comments.
This has been the Code Report.
Thanks for watching, and I will see you in the next one.

Speaker 0: It is April 25, 2022, and you're watching the Code Report. After 16 months of hard work, Nuxt. JS version 3 has finally hit release candidate. It's been 84 years. And it was well worth the wait.

It's kind of like the Next JS for view ecosystem and at first glance, the only real difference is just one valve. But the truth is that Nuxt has implemented some really unique features that are about to blow your mind if you've never used it. Imagine in a world where every file has access to every component in your project, so you never have to write an import statement ever again. I never thought I'd in my lifetime, but Nuxt JS figured out a way to handle auto imports in a way that makes total sense. We'll look at that along with a bunch of other features is over the next few minutes.

1st, we need to talk about its documentation. When you generate a new project, you get this extremely minimal starting point, and you're left wondering, what do I do next? Well, just like view itself, this is a progressive framework that can do a lot of different things, like build a single page app, a static site, a server rendered site, a rest API, or all these things together at once. What stands out in the documentation is that there's a page that corresponds to every directory in your project. Many of these directories do some magic like Pages, handles all of your routing like Next JS and I really like how the documentation explains what every file and a project will do.

On top of that, it has traditional API documentation as well as a ton of examples with interactive demos. Now the big core feature of Nuxt that makes everything else possible is a server engine they built from the ground up called Nitro. It supports SSR and static site generation, but, most importantly, it allows you to deploy on the edge, like on Cloudflare Workers, for example. That means you're not limited to Node. Js, and you can literally run server side code all over the world as close as possible to the end user, making your site extremely fast.

But the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered, although this will be supported in the future. Now, the most important aspect of rendering is how you fetch data on the server. If we go into a component, you'll notice we have a setup script which contains code that will run on the server. Now we can fetch data from our API or a database with composables like use async data or more conveniently use fetch. It makes a request then returns a data value that we can then use directly in the template below.

And, did you notice, I'm using top level await. That makes things incredibly simple, but we're not going to stop there. One problem you might encounter with server rendering is sending too much data over the wire. You can easily filter the properties you need from the object using the pick option, or you can use transform to change the format of the data entirely. But, what if we want to refresh formed to change the format of the data entirely, but what if we want to refresh this data later?

It also returns a refresh function that we can simply call from the client side template, it also has pending and error objects that we can use in the UI as well. So, really awesome data fetching capabilities out of the box. Another thing we might wanna do while we're here just adds some dynamic data to the head of the document. One way to do it is with the head component in the template, or we can go to our server side script and define it and the use head composable. That's useful, but one weird thing you may have noticed here is that I'm using these components without importing them from anywhere.

One of the most mind blowing features is auto imports. Everything in the framework is automatically available to you in any file without an ES import. On top of that, any code that you define in the composables or components directory is made available on every page automatically. The only thing I don't like about this is that it makes me wonder how many hours of my life I wasted trying to organize my imports and exports and other projects. And one other potential issue is name collisions, but it will give you a warning when that occurs.

You might also be wondering if this produces a massive JavaScript bundle, but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page. Now, let's switch gears to another awesome feature, layouts. A complex application might have multiple different types of pages, like a blog and an admin area. Every page can be assigned a layout, which will wrap it with an entirely different UI, and that layout can also have slots where specific pieces of UI can be inserted. It's just a really practical way to compose a complex UI.

In addition, Nuxt also supports nested routing very similar to the Remix framework for React. And, that's really cool because it means you can transition different parts of the UI while changing the route without needing to rerender the entire page, and that can be really useful for a dashboard style app. Yet another challenge you'll face when building a multipage application is state management, like sharing data across multiple pages. Nuxt provides a useState composable that allows you to define stayed with a shared key. Its value is preserved after being rendered on the server, and then can be shared across multiple components on the client side.

Another thing we need to talk about is server routes. Like pages, the file system corresponds to a certain route. You can add a suffix like git, post, or patch to any of these files to change the HTTP method that is used. But what's really awesome is that instead of sending a response, you just return a value. And by doing that, it allows Nuxt to automatically create typings for all of your API routes, which means you get a strongly typed API with almost no effort.

There's tons bought some stuff here, and I could keep going. But let me know if you wanna see a full Nuxt tutorial in the comments. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It is April 25, 2022, and you're watching the Code Report. After 16 months of hard work, Nuxt. JS version 3 has finally hit release candidate. It's been 84 years. And it was well worth the wait. It's kind of like the Next JS for view ecosystem and at first glance, the only real difference is just one valve. But the truth is that Nuxt has implemented some really unique features that are about to blow your mind if you've never used it. Imagine in a world where every file has access to every component in your project, so you never have to write an import statement ever again.
I never thought I'd in my lifetime, but Nuxt JS figured out a way to handle auto imports in a way that makes total sense. We'll look at that along with a bunch of other features is over the next few minutes. 1st, we need to talk about its documentation. When you generate a new project, you get this extremely minimal starting point, and you're left wondering, what do I do next? Well, just like view itself, this is a progressive framework that can do a lot of different things, like build a single page app, a static site, a server rendered site, a rest API, or all these things together at once.
visualization
software development
trade
graphic design
What stands out in the documentation is that there's a page that corresponds to every directory in your project. Many of these directories do some magic like Pages, handles all of your routing like Next JS and I really like how the documentation explains what every file and a project will do. On top of that, it has traditional API documentation as well as a ton of examples with interactive demos. Now the big core feature of Nuxt that makes everything else possible is a server engine they built from the ground up called Nitro. It supports SSR and static site generation, but, most importantly, it allows you to deploy on the edge, like on Cloudflare Workers, for example.
documentation
technology
software
That means you're not limited to Node. Js, and you can literally run server side code all over the world as close as possible to the end user, making your site extremely fast. But the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered, although this will be supported in the future. Now, the most important aspect of rendering is how you fetch data on the server. If we go into a component, you'll notice we have a setup script which contains code that will run on the server.
Now we can fetch data from our API or a database with composables like use async data or more conveniently use fetch. It makes a request then returns a data value that we can then use directly in the template below. And, did you notice, I'm using top level await.
databases
That makes things incredibly simple, but we're not going to stop there. One problem you might encounter with server rendering is sending too much data over the wire.
You can easily filter the properties you need from the object using the pick option, or you can use transform to change the format of the data entirely. But, what if we want to refresh formed to change the format of the data entirely, but what if we want to refresh this data later?
data
It also returns a refresh function that we can simply call from the client side template, it also has pending and error objects that we can use in the UI as well. So, really awesome data fetching capabilities out of the box. Another thing we might wanna do while we're here just adds some dynamic data to the head of the document. One way to do it is with the head component in the template, or we can go to our server side script and define it and the use head composable.
That's useful, but one weird thing you may have noticed here is that I'm using these components without importing them from anywhere. One of the most mind blowing features is auto imports. Everything in the framework is automatically available to you in any file without an ES import. On top of that, any code that you define in the composables or components directory is made available on every page automatically.
software
The only thing I don't like about this is that it makes me wonder how many hours of my life I wasted trying to organize my imports and exports and other projects. And one other potential issue is name collisions, but it will give you a warning when that occurs. You might also be wondering if this produces a massive JavaScript bundle, but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page. Now, let's switch gears to another awesome feature, layouts. A complex application might have multiple different types of pages, like a blog and an admin area. Every page can be assigned a layout, which will wrap it with an entirely different UI, and that layout can also have slots where specific pieces of UI can be inserted. It's just a really practical way to compose a complex UI. In addition, Nuxt also supports nested routing very similar to the Remix framework for React. And, that's really cool because it means you can transition different parts of the UI while changing the route without needing to rerender the entire page, and that can be really useful for a dashboard style app. Yet another challenge you'll face when building a multipage application is state management, like sharing data across multiple pages. Nuxt provides a useState composable that allows you to define stayed with a shared key. Its value is preserved after being rendered on the server, and then can be shared across multiple components on the client side. Another thing we need to talk about is server routes. Like pages, the file system corresponds to a certain route. You can add a suffix like git, post, or patch to any of these files to change the HTTP method that is used.
But what's really awesome is that instead of sending a response, you just return a value. And by doing that, it allows Nuxt to automatically create typings for all of your API routes, which means you get a strongly typed API with almost no effort. There's tons bought some stuff here, and I could keep going.
programming
But let me know if you wanna see a full Nuxt tutorial in the comments. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It is April 25, 2022, and you're watching the Code Report. After 16 months of hard work, Nuxt. JS version 3 has finally hit release candidate. It's been 84 years. And it was well worth the wait. It's kind of like the Next JS for view ecosystem and at first glance, the only real difference is just one valve. But the truth is that Nuxt has implemented some really unique features that are about to blow your mind if you've never used it. Imagine in a world where every file has access to every component in your project, so you never have to write an import statement ever again. I never thought I'd in my lifetime, but Nuxt JS figured out a way to handle auto imports in a way that makes total sense. We'll look at that along with a bunch of other features is over the next few minutes. 1st, we need to talk about its documentation. When you generate a new project, you get this extremely minimal starting point, and you're left wondering, what do I do next? Well, just like view itself, this is a progressive framework that can do a lot of different things, like build a single page app, a static site, a server rendered site, a rest API, or all these things together at once. What stands out in the documentation is that there's a page that corresponds to every directory in your project. Many of these directories do some magic like Pages, handles all of your routing like Next JS and I really like how the documentation explains what every file and a project will do. On top of that, it has traditional API documentation as well as a ton of examples with interactive demos. Now the big core feature of Nuxt that makes everything else possible is a server engine they built from the ground up called Nitro. It supports SSR and static site generation, but, most importantly, it allows you to deploy on the edge, like on Cloudflare Workers, for example. That means you're not limited to Node. Js, and you can literally run server side code all over the world as close as possible to the end user, making your site extremely fast. But the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered, although this will be supported in the future. Now, the most important aspect of rendering is how you fetch data on the server. If we go into a component, you'll notice we have a setup script which contains code that will run on the server. Now we can fetch data from our API or a database with composables like use async data or more conveniently use fetch. It makes a request then returns a data value that we can then use directly in the template below. And, did you notice, I'm using top level await. That makes things incredibly simple, but we're not going to stop there. One problem you might encounter with server rendering is sending too much data over the wire. You can easily filter the properties you need from the object using the pick option, or you can use transform to change the format of the data entirely. But, what if we want to refresh formed to change the format of the data entirely, but what if we want to refresh this data later? It also returns a refresh function that we can simply call from the client side template, it also has pending and error objects that we can use in the UI as well. So, really awesome data fetching capabilities out of the box. Another thing we might wanna do while we're here just adds some dynamic data to the head of the document. One way to do it is with the head component in the template, or we can go to our server side script and define it and the use head composable. That's useful, but one weird thing you may have noticed here is that I'm using these components without importing them from anywhere. One of the most mind blowing features is auto imports. Everything in the framework is automatically available to you in any file without an ES import. On top of that, any code that you define in the composables or components directory is made available on every page automatically. The only thing I don't like about this is that it makes me wonder how many hours of my life I wasted trying to organize my imports and exports and other projects. And one other potential issue is name collisions, but it will give you a warning when that occurs. You might also be wondering if this produces a massive JavaScript bundle, but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page. Now, let's switch gears to another awesome feature, layouts. A complex application might have multiple different types of pages, like a blog and an admin area. Every page can be assigned a layout, which will wrap it with an entirely different UI, and that layout can also have slots where specific pieces of UI can be inserted. It's just a really practical way to compose a complex UI. In addition, Nuxt also supports nested routing very similar to the Remix framework for React. And, that's really cool because it means you can transition different parts of the UI while changing the route without needing to rerender the entire page, and that can be really useful for a dashboard style app. Yet another challenge you'll face when building a multipage application is state management, like sharing data across multiple pages. Nuxt provides a useState composable that allows you to define stayed with a shared key. Its value is preserved after being rendered on the server, and then can be shared across multiple components on the client side. Another thing we need to talk about is server routes. Like pages, the file system corresponds to a certain route. You can add a suffix like git, post, or patch to any of these files to change the HTTP method that is used. But what's really awesome is that instead of sending a response, you just return a value. And by doing that, it allows Nuxt to automatically create typings for all of your API routes, which means you get a strongly typed API with almost no effort. There's tons bought some stuff here, and I could keep going. But let me know if you wanna see a full Nuxt tutorial in the comments. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It
it
is
is
April
april
25,
25
2022,
2022
and
and
you're
you're
watching
watching
the
the
Code
code
Report.
report
After
after
16
16
months
months
of
of
hard
hard
work,
work
Nuxt.
nuxt
JS
js
version
version
3
3
has
has
finally
finally
hit
hit
release
release
candidate.
candidate
It's
it's
been
been
84
84
years.
years
And
and
it
it
was
was
well
well
worth
worth
the
the
wait.
wait
It's
it's
kind
kind
of
of
like
like
the
the
Next
next
JS
js
for
for
view
view
ecosystem
ecosystem
and
and
at
at
first
first
glance,
glance
the
the
only
only
real
real
difference
difference
is
is
just
just
one
one
valve.
valve
But
but
the
the
truth
truth
is
is
that
that
Nuxt
nuxt
has
has
implemented
implemented
some
some
really
really
unique
unique
features
features
that
that
are
are
about
about
to
to
blow
blow
your
your
mind
mind
if
if
you've
you've
never
never
used
used
it.
it
Imagine
imagine
in
in
a
a
world
world
where
where
every
every
file
file
has
has
access
access
to
to
every
every
component
component
in
in
your
your
project,
project
so
so
you
you
never
never
have
have
to
to
write
write
an
an
import
import
statement
statement
ever
ever
again.
again
I
i
never
never
thought
thought
I'd
i'd
in
in
my
my
lifetime,
lifetime
but
but
Nuxt
nuxt
JS
js
figured
figured
out
out
a
a
way
way
to
to
handle
handle
auto
auto
imports
imports
in
in
a
a
way
way
that
that
makes
makes
total
total
sense.
sense
We'll
we'll
look
look
at
at
that
that
along
along
with
with
a
a
bunch
bunch
of
of
other
other
features
features
is
is
over
over
the
the
next
next
few
few
minutes.
minutes
1st,
1st
we
we
need
need
to
to
talk
talk
about
about
its
its
documentation.
documentation
When
when
you
you
generate
generate
a
a
new
new
project,
project
you
you
get
get
this
this
extremely
extremely
minimal
minimal
starting
starting
point,
point
and
and
you're
you're
left
left
wondering,
wondering
what
what
do
do
I
i
do
do
next?
next
Well,
well
just
just
like
like
view
view
itself,
itself
this
this
is
is
a
a
progressive
progressive
framework
framework
that
that
can
can
do
do
a
a
lot
lot
of
of
different
different
things,
things
like
like
build
build
a
a
single
single
page
page
app,
app
a
a
static
static
site,
site
a
a
server
server
rendered
rendered
site,
site
a
a
rest
rest
API,
api
or
or
all
all
these
these
things
things
together
together
at
at
once.
once
What
what
stands
stands
out
out
in
in
the
the
documentation
documentation
is
is
that
that
there's
there's
a
a
page
page
that
that
corresponds
corresponds
to
to
every
every
directory
directory
in
in
your
your
project.
project
Many
many
of
of
these
these
directories
directories
do
do
some
some
magic
magic
like
like
Pages,
pages
handles
handles
all
all
of
of
your
your
routing
routing
like
like
Next
next
JS
js
and
and
I
i
really
really
like
like
how
how
the
the
documentation
documentation
explains
explains
what
what
every
every
file
file
and
and
a
a
project
project
will
will
do.
do
On
on
top
top
of
of
that,
that
it
it
has
has
traditional
traditional
API
api
documentation
documentation
as
as
well
well
as
as
a
a
ton
ton
of
of
examples
examples
with
with
interactive
interactive
demos.
demos
Now
now
the
the
big
big
core
core
feature
feature
of
of
Nuxt
nuxt
that
that
makes
makes
everything
everything
else
else
possible
possible
is
is
a
a
server
server
engine
engine
they
they
built
built
from
from
the
the
ground
ground
up
up
called
called
Nitro.
nitro
It
it
supports
supports
SSR
ssr
and
and
static
static
site
site
generation,
generation
but,
but
most
most
importantly,
importantly
it
it
allows
allows
you
you
to
to
deploy
deploy
on
on
the
the
edge,
edge
like
like
on
on
Cloudflare
cloudflare
Workers,
workers
for
for
example.
example
That
that
means
means
you're
you're
not
not
limited
limited
to
to
Node.
node
Js,
js
and
and
you
you
can
can
literally
literally
run
run
server
server
side
side
code
code
all
all
over
over
the
the
world
world
as
as
close
close
as
as
possible
possible
to
to
the
the
end
end
user,
user
making
making
your
your
site
site
extremely
extremely
fast.
fast
But
but
the
the
one
one
thing
thing
it
it
doesn't
doesn't
do
do
yet
yet
is
is
hybrid
hybrid
rendering
rendering
where
where
you
you
have
have
some
some
routes
routes
that
that
are
are
static
static
and
and
others
others
that
that
are
are
server
server
rendered,
rendered
although
although
this
this
will
will
be
be
supported
supported
in
in
the
the
future.
future
Now,
now
the
the
most
most
important
important
aspect
aspect
of
of
rendering
rendering
is
is
how
how
you
you
fetch
fetch
data
data
on
on
the
the
server.
server
If
if
we
we
go
go
into
into
a
a
component,
component
you'll
you'll
notice
notice
we
we
have
have
a
a
setup
setup
script
script
which
which
contains
contains
code
code
that
that
will
will
run
run
on
on
the
the
server.
server
Now
now
we
we
can
can
fetch
fetch
data
data
from
from
our
our
API
api
or
or
a
a
database
database
with
with
composables
composables
like
like
use
use
async
async
data
data
or
or
more
more
conveniently
conveniently
use
use
fetch.
fetch
It
it
makes
makes
a
a
request
request
then
then
returns
returns
a
a
data
data
value
value
that
that
we
we
can
can
then
then
use
use
directly
directly
in
in
the
the
template
template
below.
below
And,
and
did
did
you
you
notice,
notice
I'm
i'm
using
using
top
top
level
level
await.
await
That
that
makes
makes
things
things
incredibly
incredibly
simple,
simple
but
but
we're
we're
not
not
going
going
to
to
stop
stop
there.
there
One
one
problem
problem
you
you
might
might
encounter
encounter
with
with
server
server
rendering
rendering
is
is
sending
sending
too
too
much
much
data
data
over
over
the
the
wire.
wire
You
you
can
can
easily
easily
filter
filter
the
the
properties
properties
you
you
need
need
from
from
the
the
object
object
using
using
the
the
pick
pick
option,
option
or
or
you
you
can
can
use
use
transform
transform
to
to
change
change
the
the
format
format
of
of
the
the
data
data
entirely.
entirely
But,
but
what
what
if
if
we
we
want
want
to
to
refresh
refresh
formed
formed
to
to
change
change
the
the
format
format
of
of
the
the
data
data
entirely,
entirely
but
but
what
what
if
if
we
we
want
want
to
to
refresh
refresh
this
this
data
data
later?
later
It
it
also
also
returns
returns
a
a
refresh
refresh
function
function
that
that
we
we
can
can
simply
simply
call
call
from
from
the
the
client
client
side
side
template,
template
it
it
also
also
has
has
pending
pending
and
and
error
error
objects
objects
that
that
we
we
can
can
use
use
in
in
the
the
UI
ui
as
as
well.
well
So,
so
really
really
awesome
awesome
data
data
fetching
fetching
capabilities
capabilities
out
out
of
of
the
the
box.
box
Another
another
thing
thing
we
we
might
might
wanna
wanna
do
do
while
while
we're
we're
here
here
just
just
adds
adds
some
some
dynamic
dynamic
data
data
to
to
the
the
head
head
of
of
the
the
document.
document
One
one
way
way
to
to
do
do
it
it
is
is
with
with
the
the
head
head
component
component
in
in
the
the
template,
template
or
or
we
we
can
can
go
go
to
to
our
our
server
server
side
side
script
script
and
and
define
define
it
it
and
and
the
the
use
use
head
head
composable.
composable
That's
that's
useful,
useful
but
but
one
one
weird
weird
thing
thing
you
you
may
may
have
have
noticed
noticed
here
here
is
is
that
that
I'm
i'm
using
using
these
these
components
components
without
without
importing
importing
them
them
from
from
anywhere.
anywhere
One
one
of
of
the
the
most
most
mind
mind
blowing
blowing
features
features
is
is
auto
auto
imports.
imports
Everything
everything
in
in
the
the
framework
framework
is
is
automatically
automatically
available
available
to
to
you
you
in
in
any
any
file
file
without
without
an
an
ES
es
import.
import
On
on
top
top
of
of
that,
that
any
any
code
code
that
that
you
you
define
define
in
in
the
the
composables
composables
or
or
components
components
directory
directory
is
is
made
made
available
available
on
on
every
every
page
page
automatically.
automatically
The
the
only
only
thing
thing
I
i
don't
don't
like
like
about
about
this
this
is
is
that
that
it
it
makes
makes
me
me
wonder
wonder
how
how
many
many
hours
hours
of
of
my
my
life
life
I
i
wasted
wasted
trying
trying
to
to
organize
organize
my
my
imports
imports
and
and
exports
exports
and
and
other
other
projects.
projects
And
and
one
one
other
other
potential
potential
issue
issue
is
is
name
name
collisions,
collisions
but
but
it
it
will
will
give
give
you
you
a
a
warning
warning
when
when
that
that
occurs.
occurs
You
you
might
might
also
also
be
be
wondering
wondering
if
if
this
this
produces
produces
a
a
massive
massive
JavaScript
javascript
bundle,
bundle
but
but
the
the
answer
answer
is
is
no
no
because
because
it
it
will
will
automatically
automatically
perform
perform
code
code
splitting
splitting
based
based
on
on
the
the
components
components
that
that
you
you
use
use
on
on
each
each
individual
individual
page.
page
Now,
now
let's
let's
switch
switch
gears
gears
to
to
another
another
awesome
awesome
feature,
feature
layouts.
layouts
A
a
complex
complex
application
application
might
might
have
have
multiple
multiple
different
different
types
types
of
of
pages,
pages
like
like
a
a
blog
blog
and
and
an
an
admin
admin
area.
area
Every
every
page
page
can
can
be
be
assigned
assigned
a
a
layout,
layout
which
which
will
will
wrap
wrap
it
it
with
with
an
an
entirely
entirely
different
different
UI,
ui
and
and
that
that
layout
layout
can
can
also
also
have
have
slots
slots
where
where
specific
specific
pieces
pieces
of
of
UI
ui
can
can
be
be
inserted.
inserted
It's
it's
just
just
a
a
really
really
practical
practical
way
way
to
to
compose
compose
a
a
complex
complex
UI.
ui
In
in
addition,
addition
Nuxt
nuxt
also
also
supports
supports
nested
nested
routing
routing
very
very
similar
similar
to
to
the
the
Remix
remix
framework
framework
for
for
React.
react
And,
and
that's
that's
really
really
cool
cool
because
because
it
it
means
means
you
you
can
can
transition
transition
different
different
parts
parts
of
of
the
the
UI
ui
while
while
changing
changing
the
the
route
route
without
without
needing
needing
to
to
rerender
rerender
the
the
entire
entire
page,
page
and
and
that
that
can
can
be
be
really
really
useful
useful
for
for
a
a
dashboard
dashboard
style
style
app.
app
Yet
yet
another
another
challenge
challenge
you'll
you'll
face
face
when
when
building
building
a
a
multipage
multipage
application
application
is
is
state
state
management,
management
like
like
sharing
sharing
data
data
across
across
multiple
multiple
pages.
pages
Nuxt
nuxt
provides
provides
a
a
useState
usestate
composable
composable
that
that
allows
allows
you
you
to
to
define
define
stayed
stayed
with
with
a
a
shared
shared
key.
key
Its
its
value
value
is
is
preserved
preserved
after
after
being
being
rendered
rendered
on
on
the
the
server,
server
and
and
then
then
can
can
be
be
shared
shared
across
across
multiple
multiple
components
components
on
on
the
the
client
client
side.
side
Another
another
thing
thing
we
we
need
need
to
to
talk
talk
about
about
is
is
server
server
routes.
routes
Like
like
pages,
pages
the
the
file
file
system
system
corresponds
corresponds
to
to
a
a
certain
certain
route.
route
You
you
can
can
add
add
a
a
suffix
suffix
like
like
git,
git
post,
post
or
or
patch
patch
to
to
any
any
of
of
these
these
files
files
to
to
change
change
the
the
HTTP
http
method
method
that
that
is
is
used.
used
But
but
what's
what's
really
really
awesome
awesome
is
is
that
that
instead
instead
of
of
sending
sending
a
a
response,
response
you
you
just
just
return
return
a
a
value.
value
And
and
by
by
doing
doing
that,
that
it
it
allows
allows
Nuxt
nuxt
to
to
automatically
automatically
create
create
typings
typings
for
for
all
all
of
of
your
your
API
api
routes,
routes
which
which
means
means
you
you
get
get
a
a
strongly
strongly
typed
typed
API
api
with
with
almost
almost
no
no
effort.
effort
There's
there's
tons
tons
bought
bought
some
some
stuff
stuff
here,
here
and
and
I
i
could
could
keep
keep
going.
going
But
but
let
let
me
me
know
know
if
if
you
you
wanna
wanna
see
see
a
a
full
full
Nuxt
nuxt
tutorial
tutorial
in
in
the
the
comments.
comments
This
this
has
has
been
been
the
the
Code
code
Report.
report
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The Code Report has released an Nuxt. JS version 3, which has been 84 years since its first release. The version has some unique features, including a file manager, a server engine, and a dynamic data rendering. The developers have created a page for every directory in the project, including a setup script, and the version is designed to support all of the functions of a single file.
The Nuxt big thing in web development?
It is April 25, 2022, and you're watching the Code Report. After 16 months of hard work, Nuxt. JS version 3 has finally hit release candidate. It's been 84 years. And it was well worth the wait. It's kind of like the Next JS for view ecosystem and at first glance, the only real difference is just one valve. But the truth is that Nuxt has implemented some really unique features that are about to blow your mind if you've never used it. Imagine in a world where every file has access to every component in your project, so you never have to write an import statement ever again. I never thought I'd in my lifetime, but Nuxt JS figured out a way to handle auto imports in a way that makes total sense. We'll look at that along with a bunch of other features is over the next few minutes. 1st, we need to talk about its documentation. When you generate a new project, you get this extremely minimal starting point, and you're left wondering, what do I do next? Well, just like view itself, this is a progressive framework that can do a lot of different things, like build a single page app, a static site, a server rendered site, a rest API, or all these things together at once. What stands out in the documentation is that there's a page that corresponds to every directory in your project. Many of these directories do some magic like Pages, handles all of your routing like Next JS and I really like how the documentation explains what every file and a project will do. On top of that, it has traditional API documentation as well as a ton of examples with interactive demos. Now the big core feature of Nuxt that makes everything else possible is a server engine they built from the ground up called Nitro. It supports SSR and static site generation, but, most importantly, it allows you to deploy on the edge, like on Cloudflare Workers, for example. That means you're not limited to Node. Js, and you can literally run server side code all over the world as close as possible to the end user, making your site extremely fast. But the one thing it doesn't do yet is hybrid rendering where you have some routes that are static and others that are server rendered, although this will be supported in the future. Now, the most important aspect of rendering is how you fetch data on the server. If we go into a component, you'll notice we have a setup script which contains code that will run on the server. Now we can fetch data from our API or a database with composables like use async data or more conveniently use fetch. It makes a request then returns a data value that we can then use directly in the template below. And, did you notice, I'm using top level await. That makes things incredibly simple, but we're not going to stop there. One problem you might encounter with server rendering is sending too much data over the wire. You can easily filter the properties you need from the object using the pick option, or you can use transform to change the format of the data entirely. But, what if we want to refresh formed to change the format of the data entirely, but what if we want to refresh this data later? It also returns a refresh function that we can simply call from the client side template, it also has pending and error objects that we can use in the UI as well. So, really awesome data fetching capabilities out of the box. Another thing we might wanna do while we're here just adds some dynamic data to the head of the document. One way to do it is with the head component in the template, or we can go to our server side script and define it and the use head composable. That's useful, but one weird thing you may have noticed here is that I'm using these components without importing them from anywhere. One of the most mind blowing features is auto imports. Everything in the framework is automatically available to you in any file without an ES import. On top of that, any code that you define in the composables or components directory is made available on every page automatically. The only thing I don't like about this is that it makes me wonder how many hours of my life I wasted trying to organize my imports and exports and other projects. And one other potential issue is name collisions, but it will give you a warning when that occurs. You might also be wondering if this produces a massive JavaScript bundle, but the answer is no because it will automatically perform code splitting based on the components that you use on each individual page. Now, let's switch gears to another awesome feature, layouts. A complex application might have multiple different types of pages, like a blog and an admin area. Every page can be assigned a layout, which will wrap it with an entirely different UI, and that layout can also have slots where specific pieces of UI can be inserted. It's just a really practical way to compose a complex UI. In addition, Nuxt also supports nested routing very similar to the Remix framework for React. And, that's really cool because it means you can transition different parts of the UI while changing the route without needing to rerender the entire page, and that can be really useful for a dashboard style app. Yet another challenge you'll face when building a multipage application is state management, like sharing data across multiple pages. Nuxt provides a useState composable that allows you to define stayed with a shared key. Its value is preserved after being rendered on the server, and then can be shared across multiple components on the client side. Another thing we need to talk about is server routes. Like pages, the file system corresponds to a certain route. You can add a suffix like git, post, or patch to any of these files to change the HTTP method that is used. But what's really awesome is that instead of sending a response, you just return a value. And by doing that, it allows Nuxt to automatically create typings for all of your API routes, which means you get a strongly typed API with almost no effort. There's tons bought some stuff here, and I could keep going. But let me know if you wanna see a full Nuxt tutorial in the comments. This has been the Code Report. Thanks for watching, and I will see you in the next one.
The Code Report has released an Nuxt. JS version 3, which has been 84 years since its first release. The version has some unique features, including a file manager, a server engine, and a dynamic data rendering. The developers have created a page for every directory in the project, including a setup script, and the version is designed to support all of the functions of a single file.