Nuxt in 100 Seconds

next A batteries included framework for building any type of web application you can imagine with vue.js the purpose of VJs 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 nux comes in it works by strapping its Nitro server engine to 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 e-commerce and countless others to get started generate a new project with the CLI then you'll find the main entry point in the app.view file and notice how it's configured with typescript out of the box to an 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 nux though is that reusable components and composables have their own dedicated directories any code defined here can be automatically imported in your pages and that means you don't 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 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 and markdown and use it throughout the application with minimal friction then we have the middleware directory which is capable of running code before you navigate to a route like for collecting analytics or checking the user authentication state next has many other special directories to offer but everything in the framework is progressively enhanced 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 zero effort on top of that it also provides a use state composable that can deal with the 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 pre-render for a static host build it for a node.js server or deploy it to a serverless edge function this has been nuxed 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 [Music]

Channel: Fireship

Views: 548,047

Keywords: webdev, app development, lesson, tutorial

Id: dCxSsr5xuL8

Length: 2min 49sec (169 seconds)

Published: Tue Jun 13 2023