Nuxt is a full-stack JavaScript framework based on Vue.js that provides server-side rendering, data fetching, state management, and many other features. Learn how to build web applications with Nuxt in this quickstart tutorial. 

#webdevelopment #javascript #100SecondsOfCode

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

Nuxt Docs https://nuxt.com/
Nuxt on GitHub https://github.com/nuxt/nuxt
Vue in 100 Seconds https://youtu.be/nhBVL41-_Cw
Vite in 100 Seconds https://youtu.be/KCrXgy8qtjM


🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

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

🔖 Topics Covered

- Nuxt basics tutorial
- Vue.js metaframework
- Nuxt directories explained
- Nuxt vs Next.js
- Vue vs React
- Which JavaScript framework should I learn?
2024-02-04T05:04:17.976Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d0c7fb00-2656-4d0f-840d-37710000e552
4f630a23c73b49f1dd135f34431102296075ae6d20610735ac7d3717d30f861a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Nuxt, a batteries included framework for building any type of web application you can imagine with Vue.
Js.
The purpose of Vue.
Js is to build front end user interfaces with JavaScript, but a true full stack web application also needs to deal with routing, data fetching, caching, deployment, and more.
That's where NUCs comes in.
It works by strapping its server engine 2 view, enabling multiple rendering modes from a single application.
By default, it does universal rendering where the initial page view is rendered on the server, then JavaScript takes over to handle all subsequent navigation client side.
However, if that's not ideal, developers can set different rendering and caching rules for every route, and it's capable of running on edge networks like Cloudflare.
Its built in dev tools are incredible and may trigger jealousy if you use a different framework.
Beyond that, it has a huge ecosystem of modules that can handle requirements like image optimization, content management, database integrations, ecommerce, and countless others.
To get started, generate a new project with the CLI, then you'll find the main entry point in the app dot Vue file.
And notice how it's configured with TypeScript out of the box to ensure your own safety.
To build an application, you write view components in the pages directory.
The structure of the file system determines the routes and URLs in the browser.
What's unique about Nuxt though is that usable components and composables have their own dedicated directories.
Any code defined here can be automatically imported in your pages, and that means you need a massive list of import statements in every single page.
And under the hood, it will automatically handle code splitting, so only the JavaScript needed for the components in this file will be sent downstream to the browser.
Jotter.
Next up, we have the layouts directory.
Here, we define view components that have a slot in the middle, allowing the outer UI, like a nav bar and footer, to be shared across multiple pages.
Now if you're building a blog, you'll really like the content directory because here you can write content in markdown and use it throughout the application with minimal friction.
Then we have the middleware directory, which is capable running code before you navigate to a route, like for collecting analytics or checking the user authentication state.
Nuxt has many other special directories to offer, but everything in the framework is progressively JANSS, which means you can opt into these features as needed.
Now when it comes to data fetching, it has built in composables like use fetch.
It's built on top of the fetch API in the browser, but can also cache and dedupe requests to make your application more efficient with 0 effort.
On top of that, it also provides a useState composable that can deal with complex issue of state management between client and server renders.
When it comes to search engine optimization, it also provides composables like use head and use SEO meta to easily add metadata for search bots.
Meanwhile, for humans, you can easily animate page transitions with the built in transition component.
And finally, when it comes time to deploy, you can either prerender for a static host, build it for a Node.
Js server, or deploy it to a serverless edge function.
This has been Nuxt in 100 seconds.
It's been a while since I've made one of these videos.
If you think I should continue making videos like this, hit the like button and let me know in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: Nuxt, a batteries included framework for building any type of web application you can imagine with Vue. Js. The purpose of Vue. Js is to build front end user interfaces with JavaScript, but a true full stack web application also needs to deal with routing, data fetching, caching, deployment, and more. That's where NUCs comes in.

It works by strapping its server engine 2 view, enabling multiple rendering modes from a single application. By default, it does universal rendering where the initial page view is rendered on the server, then JavaScript takes over to handle all subsequent navigation client side. However, if that's not ideal, developers can set different rendering and caching rules for every route, and it's capable of running on edge networks like Cloudflare. Its built in dev tools are incredible and may trigger jealousy if you use a different framework. Beyond that, it has a huge ecosystem of modules that can handle requirements like image optimization, content management, database integrations, ecommerce, and countless others.

To get started, generate a new project with the CLI, then you'll find the main entry point in the app dot Vue file. And notice how it's configured with TypeScript out of the box to ensure your own safety. To build an application, you write view components in the pages directory. The structure of the file system determines the routes and URLs in the browser. What's unique about Nuxt though is that usable components and composables have their own dedicated directories.

Any code defined here can be automatically imported in your pages, and that means you need a massive list of import statements in every single page. And under the hood, it will automatically handle code splitting, so only the JavaScript needed for the components in this file will be sent downstream to the browser. Jotter. Next up, we have the layouts directory. Here, we define view components that have a slot in the middle, allowing the outer UI, like a nav bar and footer, to be shared across multiple pages.

Now if you're building a blog, you'll really like the content directory because here you can write content in markdown and use it throughout the application with minimal friction. Then we have the middleware directory, which is capable running code before you navigate to a route, like for collecting analytics or checking the user authentication state. Nuxt has many other special directories to offer, but everything in the framework is progressively JANSS, which means you can opt into these features as needed. Now when it comes to data fetching, it has built in composables like use fetch. It's built on top of the fetch API in the browser, but can also cache and dedupe requests to make your application more efficient with 0 effort.

On top of that, it also provides a useState composable that can deal with complex issue of state management between client and server renders. When it comes to search engine optimization, it also provides composables like use head and use SEO meta to easily add metadata for search bots. Meanwhile, for humans, you can easily animate page transitions with the built in transition component. And finally, when it comes time to deploy, you can either prerender for a static host, build it for a Node. Js server, or deploy it to a serverless edge function.

This has been Nuxt in 100 seconds. It's been a while since I've made one of these videos. If you think I should continue making videos like this, hit the like button and let me know in the comments. Thanks for watching, and I will see you in the next one.
Nuxt, a batteries included framework for building any type of web application you can imagine with Vue. Js. The purpose of Vue. Js is to build front end user interfaces with JavaScript, but a true full stack web application also needs to deal with routing, data fetching, caching, deployment, and more. That's where NUCs comes in. It works by strapping its server engine 2 view, enabling multiple rendering modes from a single application. By default, it does universal rendering where the initial page view is rendered on the server, then JavaScript takes over to handle all subsequent navigation client side.
However, if that's not ideal, developers can set different rendering and caching rules for every route, and it's capable of running on edge networks like Cloudflare. Its built in dev tools are incredible and may trigger jealousy if you use a different framework. Beyond that, it has a huge ecosystem of modules that can handle requirements like image optimization, content management, database integrations, ecommerce, and countless others. To get started, generate a new project with the CLI, then you'll find the main entry point in the app dot Vue file. And notice how it's configured with TypeScript out of the box to ensure your own safety. To build an application, you write view components in the pages directory.
software development
software
The structure of the file system determines the routes and URLs in the browser. What's unique about Nuxt though is that usable components and composables have their own dedicated directories. Any code defined here can be automatically imported in your pages, and that means you need a massive list of import statements in every single page. And under the hood, it will automatically handle code splitting, so only the JavaScript needed for the components in this file will be sent downstream to the browser.
Jotter. Next up, we have the layouts directory. Here, we define view components that have a slot in the middle, allowing the outer UI, like a nav bar and footer, to be shared across multiple pages. Now if you're building a blog, you'll really like the content directory because here you can write content in markdown and use it throughout the application with minimal friction. Then we have the middleware directory, which is capable running code before you navigate to a route, like for collecting analytics or checking the user authentication state. Nuxt has many other special directories to offer, but everything in the framework is progressively JANSS, which means you can opt into these features as needed.
blogging
software
Now when it comes to data fetching, it has built in composables like use fetch. It's built on top of the fetch API in the browser, but can also cache and dedupe requests to make your application more efficient with 0 effort.
On top of that, it also provides a useState composable that can deal with complex issue of state management between client and server renders. When it comes to search engine optimization, it also provides composables like use head and use SEO meta to easily add metadata for search bots. Meanwhile, for humans, you can easily animate page transitions with the built in transition component.
google
animation
And finally, when it comes time to deploy, you can either prerender for a static host, build it for a Node.
Js server, or deploy it to a serverless edge function. This has been Nuxt in 100 seconds. It's been a while since I've made one of these videos. If you think I should continue making videos like this, hit the like button and let me know in the comments. Thanks for watching, and I will see you in the next one.
youtube
video gaming
Nuxt, a batteries included framework for building any type of web application you can imagine with Vue. Js. The purpose of Vue. Js is to build front end user interfaces with JavaScript, but a true full stack web application also needs to deal with routing, data fetching, caching, deployment, and more. That's where NUCs comes in. It works by strapping its server engine 2 view, enabling multiple rendering modes from a single application. By default, it does universal rendering where the initial page view is rendered on the server, then JavaScript takes over to handle all subsequent navigation client side. However, if that's not ideal, developers can set different rendering and caching rules for every route, and it's capable of running on edge networks like Cloudflare. Its built in dev tools are incredible and may trigger jealousy if you use a different framework. Beyond that, it has a huge ecosystem of modules that can handle requirements like image optimization, content management, database integrations, ecommerce, and countless others. To get started, generate a new project with the CLI, then you'll find the main entry point in the app dot Vue file. And notice how it's configured with TypeScript out of the box to ensure your own safety. To build an application, you write view components in the pages directory. The structure of the file system determines the routes and URLs in the browser. What's unique about Nuxt though is that usable components and composables have their own dedicated directories. Any code defined here can be automatically imported in your pages, and that means you need a massive list of import statements in every single page. And under the hood, it will automatically handle code splitting, so only the JavaScript needed for the components in this file will be sent downstream to the browser. Jotter. Next up, we have the layouts directory. Here, we define view components that have a slot in the middle, allowing the outer UI, like a nav bar and footer, to be shared across multiple pages. Now if you're building a blog, you'll really like the content directory because here you can write content in markdown and use it throughout the application with minimal friction. Then we have the middleware directory, which is capable running code before you navigate to a route, like for collecting analytics or checking the user authentication state. Nuxt has many other special directories to offer, but everything in the framework is progressively JANSS, which means you can opt into these features as needed. Now when it comes to data fetching, it has built in composables like use fetch. It's built on top of the fetch API in the browser, but can also cache and dedupe requests to make your application more efficient with 0 effort. On top of that, it also provides a useState composable that can deal with complex issue of state management between client and server renders. When it comes to search engine optimization, it also provides composables like use head and use SEO meta to easily add metadata for search bots. Meanwhile, for humans, you can easily animate page transitions with the built in transition component. And finally, when it comes time to deploy, you can either prerender for a static host, build it for a Node. Js server, or deploy it to a serverless edge function. This has been Nuxt in 100 seconds. It's been a while since I've made one of these videos. If you think I should continue making videos like this, hit the like button and let me know in the comments. Thanks for watching, and I will see you in the next one.
Nuxt,
nuxt
a
a
batteries
batteries
included
included
framework
framework
for
for
building
building
any
any
type
type
of
of
web
web
application
application
you
you
can
can
imagine
imagine
with
with
Vue.
vue
Js.
js
The
the
purpose
purpose
of
of
Vue.
vue
Js
js
is
is
to
to
build
build
front
front
end
end
user
user
interfaces
interfaces
with
with
JavaScript,
javascript
but
but
a
a
true
true
full
full
stack
stack
web
web
application
application
also
also
needs
needs
to
to
deal
deal
with
with
routing,
routing
data
data
fetching,
fetching
caching,
caching
deployment,
deployment
and
and
more.
more
That's
that's
where
where
NUCs
nucs
comes
comes
in.
in
It
it
works
works
by
by
strapping
strapping
its
its
server
server
engine
engine
2
2
view,
view
enabling
enabling
multiple
multiple
rendering
rendering
modes
modes
from
from
a
a
single
single
application.
application
By
by
default,
default
it
it
does
does
universal
universal
rendering
rendering
where
where
the
the
initial
initial
page
page
view
view
is
is
rendered
rendered
on
on
the
the
server,
server
then
then
JavaScript
javascript
takes
takes
over
over
to
to
handle
handle
all
all
subsequent
subsequent
navigation
navigation
client
client
side.
side
However,
however
if
if
that's
that's
not
not
ideal,
ideal
developers
developers
can
can
set
set
different
different
rendering
rendering
and
and
caching
caching
rules
rules
for
for
every
every
route,
route
and
and
it's
it's
capable
capable
of
of
running
running
on
on
edge
edge
networks
networks
like
like
Cloudflare.
cloudflare
Its
its
built
built
in
in
dev
dev
tools
tools
are
are
incredible
incredible
and
and
may
may
trigger
trigger
jealousy
jealousy
if
if
you
you
use
use
a
a
different
different
framework.
framework
Beyond
beyond
that,
that
it
it
has
has
a
a
huge
huge
ecosystem
ecosystem
of
of
modules
modules
that
that
can
can
handle
handle
requirements
requirements
like
like
image
image
optimization,
optimization
content
content
management,
management
database
database
integrations,
integrations
ecommerce,
ecommerce
and
and
countless
countless
others.
others
To
to
get
get
started,
started
generate
generate
a
a
new
new
project
project
with
with
the
the
CLI,
cli
then
then
you'll
you'll
find
find
the
the
main
main
entry
entry
point
point
in
in
the
the
app
app
dot
dot
Vue
vue
file.
file
And
and
notice
notice
how
how
it's
it's
configured
configured
with
with
TypeScript
typescript
out
out
of
of
the
the
box
box
to
to
ensure
ensure
your
your
own
own
safety.
safety
To
to
build
build
an
an
application,
application
you
you
write
write
view
view
components
components
in
in
the
the
pages
pages
directory.
directory
The
the
structure
structure
of
of
the
the
file
file
system
system
determines
determines
the
the
routes
routes
and
and
URLs
urls
in
in
the
the
browser.
browser
What's
what's
unique
unique
about
about
Nuxt
nuxt
though
though
is
is
that
that
usable
usable
components
components
and
and
composables
composables
have
have
their
their
own
own
dedicated
dedicated
directories.
directories
Any
any
code
code
defined
defined
here
here
can
can
be
be
automatically
automatically
imported
imported
in
in
your
your
pages,
pages
and
and
that
that
means
means
you
you
need
need
a
a
massive
massive
list
list
of
of
import
import
statements
statements
in
in
every
every
single
single
page.
page
And
and
under
under
the
the
hood,
hood
it
it
will
will
automatically
automatically
handle
handle
code
code
splitting,
splitting
so
so
only
only
the
the
JavaScript
javascript
needed
needed
for
for
the
the
components
components
in
in
this
this
file
file
will
will
be
be
sent
sent
downstream
downstream
to
to
the
the
browser.
browser
Jotter.
jotter
Next
next
up,
up
we
we
have
have
the
the
layouts
layouts
directory.
directory
Here,
here
we
we
define
define
view
view
components
components
that
that
have
have
a
a
slot
slot
in
in
the
the
middle,
middle
allowing
allowing
the
the
outer
outer
UI,
ui
like
like
a
a
nav
nav
bar
bar
and
and
footer,
footer
to
to
be
be
shared
shared
across
across
multiple
multiple
pages.
pages
Now
now
if
if
you're
you're
building
building
a
a
blog,
blog
you'll
you'll
really
really
like
like
the
the
content
content
directory
directory
because
because
here
here
you
you
can
can
write
write
content
content
in
in
markdown
markdown
and
and
use
use
it
it
throughout
throughout
the
the
application
application
with
with
minimal
minimal
friction.
friction
Then
then
we
we
have
have
the
the
middleware
middleware
directory,
directory
which
which
is
is
capable
capable
running
running
code
code
before
before
you
you
navigate
navigate
to
to
a
a
route,
route
like
like
for
for
collecting
collecting
analytics
analytics
or
or
checking
checking
the
the
user
user
authentication
authentication
state.
state
Nuxt
nuxt
has
has
many
many
other
other
special
special
directories
directories
to
to
offer,
offer
but
but
everything
everything
in
in
the
the
framework
framework
is
is
progressively
progressively
JANSS,
janss
which
which
means
means
you
you
can
can
opt
opt
into
into
these
these
features
features
as
as
needed.
needed
Now
now
when
when
it
it
comes
comes
to
to
data
data
fetching,
fetching
it
it
has
has
built
built
in
in
composables
composables
like
like
use
use
fetch.
fetch
It's
it's
built
built
on
on
top
top
of
of
the
the
fetch
fetch
API
api
in
in
the
the
browser,
browser
but
but
can
can
also
also
cache
cache
and
and
dedupe
dedupe
requests
requests
to
to
make
make
your
your
application
application
more
more
efficient
efficient
with
with
0
0
effort.
effort
On
on
top
top
of
of
that,
that
it
it
also
also
provides
provides
a
a
useState
usestate
composable
composable
that
that
can
can
deal
deal
with
with
complex
complex
issue
issue
of
of
state
state
management
management
between
between
client
client
and
and
server
server
renders.
renders
When
when
it
it
comes
comes
to
to
search
search
engine
engine
optimization,
optimization
it
it
also
also
provides
provides
composables
composables
like
like
use
use
head
head
and
and
use
use
SEO
seo
meta
meta
to
to
easily
easily
add
add
metadata
metadata
for
for
search
search
bots.
bots
Meanwhile,
meanwhile
for
for
humans,
humans
you
you
can
can
easily
easily
animate
animate
page
page
transitions
transitions
with
with
the
the
built
built
in
in
transition
transition
component.
component
And
and
finally,
finally
when
when
it
it
comes
comes
time
time
to
to
deploy,
deploy
you
you
can
can
either
either
prerender
prerender
for
for
a
a
static
static
host,
host
build
build
it
it
for
for
a
a
Node.
node
Js
js
server,
server
or
or
deploy
deploy
it
it
to
to
a
a
serverless
serverless
edge
edge
function.
function
This
this
has
has
been
been
Nuxt
nuxt
in
in
100
100
seconds.
seconds
It's
it's
been
been
a
a
while
while
since
since
I've
i've
made
made
one
one
of
of
these
these
videos.
videos
If
if
you
you
think
think
I
i
should
should
continue
continue
making
making
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
let
let
me
me
know
know
in
in
the
the
comments.
comments
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 speaker explains the features of Nuxt, a framework for building web applications with performed components and automation. They also discuss the different directories and file system used for development, including dynamic search optimization and search engine optimization. The speaker emphasizes the importance of creating a unique project with a specific CLI and mentions other special directories for developers.
Nuxt in 100 Seconds
Nuxt, a batteries included framework for building any type of web application you can imagine with Vue. Js. The purpose of Vue. Js is to build front end user interfaces with JavaScript, but a true full stack web application also needs to deal with routing, data fetching, caching, deployment, and more. That's where NUCs comes in. It works by strapping its server engine 2 view, enabling multiple rendering modes from a single application. By default, it does universal rendering where the initial page view is rendered on the server, then JavaScript takes over to handle all subsequent navigation client side. However, if that's not ideal, developers can set different rendering and caching rules for every route, and it's capable of running on edge networks like Cloudflare. Its built in dev tools are incredible and may trigger jealousy if you use a different framework. Beyond that, it has a huge ecosystem of modules that can handle requirements like image optimization, content management, database integrations, ecommerce, and countless others. To get started, generate a new project with the CLI, then you'll find the main entry point in the app dot Vue file. And notice how it's configured with TypeScript out of the box to ensure your own safety. To build an application, you write view components in the pages directory. The structure of the file system determines the routes and URLs in the browser. What's unique about Nuxt though is that usable components and composables have their own dedicated directories. Any code defined here can be automatically imported in your pages, and that means you need a massive list of import statements in every single page. And under the hood, it will automatically handle code splitting, so only the JavaScript needed for the components in this file will be sent downstream to the browser. Jotter. Next up, we have the layouts directory. Here, we define view components that have a slot in the middle, allowing the outer UI, like a nav bar and footer, to be shared across multiple pages. Now if you're building a blog, you'll really like the content directory because here you can write content in markdown and use it throughout the application with minimal friction. Then we have the middleware directory, which is capable running code before you navigate to a route, like for collecting analytics or checking the user authentication state. Nuxt has many other special directories to offer, but everything in the framework is progressively JANSS, which means you can opt into these features as needed. Now when it comes to data fetching, it has built in composables like use fetch. It's built on top of the fetch API in the browser, but can also cache and dedupe requests to make your application more efficient with 0 effort. On top of that, it also provides a useState composable that can deal with complex issue of state management between client and server renders. When it comes to search engine optimization, it also provides composables like use head and use SEO meta to easily add metadata for search bots. Meanwhile, for humans, you can easily animate page transitions with the built in transition component. And finally, when it comes time to deploy, you can either prerender for a static host, build it for a Node. Js server, or deploy it to a serverless edge function. This has been Nuxt in 100 seconds. It's been a while since I've made one of these videos. If you think I should continue making videos like this, hit the like button and let me know in the comments. Thanks for watching, and I will see you in the next one.
The speaker explains the features of Nuxt, a framework for building web applications with performed components and automation. They also discuss the different directories and file system used for development, including dynamic search optimization and search engine optimization. The speaker emphasizes the importance of creating a unique project with a specific CLI and mentions other special directories for developers.