Nuxt 3 Projects Build Scalable Applications with Nuxt 3 Using TypeScript, Pinia, and Composition API
Explore the world of Nuxt 3, the powerful Vue.js framework to build scalable, production-ready applications Key Features Acquire essential skills through eight practical Nuxt 3 projects Gain hands-on exposure to routing, authentication, state management, Composition API, SEO, testing, custom modules...
| Otros Autores: | , , |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2024]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009835403406719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Contributors
- Table of Contents
- Preface
- Chapter 1: Setting Up Your Nuxt 3 Environment for a Basic "Hello Nuxt" App
- Technical requirements
- Introduction to Nuxt 3
- The evolution of web development
- The birth of Nuxt
- Why Nuxt?
- The architecture and principles of Nuxt
- Built on top of Vue
- Universal rendering and static site generation
- Performance optimizations
- Installing and setting up the Nuxt 3 environment
- Prerequisites
- Creating your first "Hello Nuxt" app
- Initialization - the steps to create a new Nuxt project
- The default project structure
- Recommended extensions
- Vue - Official
- Nuxtr
- Summary
- Practice questions
- Further reading
- Chapter 2: Building a Simple Portfolio Using Tailwind CSS and a Dive into Nuxt 3's Project Structure
- Technical requirements
- Essential background - what is Tailwind CSS?
- Setting up and integrating with Tailwind CSS
- Create a new project
- Installing Tailwind CSS
- Creating the website layout and customizing the font
- Embedding the Lato font (or any Google font)
- Creating the layout
- Managing images in the assets folder
- Creating the ProjectShowcase and SkillChip components
- Creating the SkillChip component
- Creating the ProjectShowcase component
- Styling within the component itself
- Creating a useScrollTo composable
- Summary
- Practice questions
- Further reading
- Chapter 3: Building a Real Estate Listing Project to Grasp Routing, Views, Layouts, and Plugins
- Technical requirements
- Essential background- understanding Nuxt 3 routing, layouts, and plugins
- Setting up your real estate listing project in Nuxt 3
- Defining a default layout for the website and overriding it with a 404 page
- Defining a default layout
- Creating the BaseHeader component.
- Creating the home page and exploring TypeScript support
- Introduction to the pages directory
- Exploring TypeScript support
- A note on the component path
- Create Property and Category Card Components
- Creating the home page
- Creating a dynamic listing page
- Creating and validating a property details page
- Creating a Custom error page
- Creating a plugin to use Dasyjs for formatting dates
- Installing Dayjs
- Setting up the plugin directory and file
- Initializing Dayjs with configuration
- Using the global FromNow function for the property details page
- Summary
- Practice questions
- Further reading
- Chapter 4: Building a Weather Dashboard - Data Fetching and State Management
- Technical requirements
- Essential background - understanding Nuxt 3 Data Fetching and State Management
- Integrating Nuxt UI in the weather dashboard
- Exploring data fetching with fetch in Nuxt 3
- Creating an account on OpenWeatherMap
- Testing the API
- Defining global types
- Utilizing useRuntimeConfig to expose configuration within the application
- Creating the CitiesLookup component
- Fetching the weather data
- Integrating with the Pinia store to monitor city and weather data
- Installing Pinia and creating the first store
- Integrating Reactive States and Functions in Pinia Store
- Refactoring components for Pinia store integration
- Implementing weather data widget components
- Summary
- Practice questions
- Further reading
- Chapter 5: Building a Personal Posts Space and Implementing Authentication
- Technical requirements
- Essential Background: What is Supabase?
- Setting Up Initial Supabase Project For User Authentication
- Setting Up the Database Schema
- Integrating Nuxt 3 with Supabase
- Creating a New Nuxt 3 Project with Supabase Integration
- Overriding Authentication Routes.
- Authentication UI and Validating Inputs
- Installing Required Modules
- Setting Up Auth Pages
- Using Joi for Input Validation
- Setting Up User Authentication with Supabase
- Creating the Signup Function
- Creating and Managing Personal User Posts
- Adding RLS Policy for the 'Posts' Table
- Using Supabase API for Post Management
- Building the Post Information Page
- Displaying User Posts
- Summary
- Practice Questions
- Further Reading
- Chapter 6: Enhancing a Recipe-Sharing Site While Optimizing SEO Using Nuxt 3
- Technical requirements
- Essential background - Understanding Search Engine Optimization (SEO)
- Exploring the repository
- Defining metadata for each page
- Setting up the project structure
- Setting up site configuration with nuxt SEO
- Overriding metadata
- Implementing structured data for improved search engine rankings
- Creating a recipe node
- Optimizing recipe images to load pages faster
- Creating a custom og:image for the recipe page
- Generating dynamic site maps for the recipe-sharing site
- Summary
- Practice questions
- Further reading
- Chapter 7: Building a Quiz Game Application to Learn about Testing
- Technical requirements
- Exploring the repository
- Essential background - fundamentals of testing
- Implementing the quiz game app
- Questions data
- Types definitions
- Quiz Pinia store
- The app.vue file
- Writing unit tests for the Pinia store
- Exploring Vitest
- Testing the quiz store
- Writing unit tests for components
- Setting up for component testing
- Creating the Question.spec.ts test file
- Writing the component unit test
- Writing end-to-end tests for the quiz game
- Setting up for E2E testing
- Writing E2E tests
- Exploring Vitest UI and test coverage tools
- Summary
- Practice questions
- Further reading.
- Chapter 8: Creating a Custom Translation Module in a Nuxt 3 Monorepo
- Technical requirements
- Essential background - fundamentals of testing
- Setting up a Nuxt monorepo
- Creating a website application
- Developing a custom translation module
- Installing the module in our application
- Configuring translation module options
- Reading local files inside the module
- Expanding the module with plugins, composables, and components
- Creating a t helper function
- Setting up a language switcher component
- Future directions
- POS system example
- E-commerce platform example
- Final thoughts
- Summary
- Practice questions
- Further reading
- Index
- Other Books You May Enjoy.
