Vue. js 3 for Beginners Learn the Essentials of Vue. js 3 and Its Ecosystem to Build Modern Web Applications
Gain proficiency in Vue.js 3 and its core libraries, including Pinia, Vue Router, and Vitest, by developing a social media web application with detailed, hands-on instructions Key Features Discover best practices for building scalable and performant Vue.js applications Learn the basics of component-...
| 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/alma991009849103206719 |
Tabla de Contenidos:
- Intro
- Title Page
- Copyright and Credits
- Dedication
- Foreword
- Contributors
- Table of Contents
- Preface
- Part 1: Getting Started with Vue.js
- Chapter 1: Exploring the Book's Layout and Companion App
- Technical requirements
- The companion app
- The Companion App features
- The application code
- The core areas of a web application
- Component-based architecture
- One page at a time
- From one page to many components
- Atomic design
- Separation of concern
- Summary
- Chapter 2: The Foundation of Vue.js
- Vue.js reactivity fundamentals
- Understanding the Vue.js lifecycle and hooks
- Vue.js component structure
- Single-file components
- Options API versus Composition API - Two sides of the same coin
- Sample components
- Summary
- Part 2: Understanding the Core Features of Vue.js
- Chapter 3: Making Our HTML Dynamic
- Technical requirements
- Building your first Vue.js project
- Creating our first component
- Introducing properties
- Learning Vue.js reactive data with Refs and Reactive
- Summary
- Chapter 4: Utilizing Vue's Built-In Directives for Effortless Development
- Technical requirements
- Displaying text with v-text and v-html
- Applying dynamic text to our component using v-text
- Modifying the inner HTML of an element with v-html
- Handling element visibility with v-if and v-show
- Hiding elements from the DOM with v-show
- Keeping the DOM clean and performant with v-if
- Simplifying your template with v-for
- Summary
- Chapter 5: Leveraging Computed Properties and Methods in Vue.js
- Technical requirements
- Abstracting functionality using methods
- Creating dynamic data using computed properties
- Learning the difference between methods and computed properties
- Technical differences
- How to spot them in your component
- Summary.
- Chapter 6: Event and Data Handling in Vue.js
- Technical requirements
- Exploring the Companion App changes
- Folders and file changes
- Logic changes
- Deepening our knowledge of props
- Props configurations
- Creating a basic button
- Handling native events in Vue.js
- Event modifiers
- Connecting components with custom events
- Event arguments
- Summary
- Chapter 7: Handling API Data and Managing Async Components with Vue.js
- Technical requirements
- Loading data from an API using the Vue.js life cycle
- Loading social posts from an API
- Fixing the SocialPost.vue properties' misalignment
- Load comments on demand
- Watching for changes in components using watch
- Handling asynchronous components with <
- Suspense>
- Understanding asynchronous components
- Turning a component into an asynchronous component
- Rendering async components
- Summary
- Part 3: Expanding Your Knowledge with Vue.js and Its Core Libraries
- Chapter 8: Testing Your App with Vitest and Cypress
- Technical requirements
- The testing pyramids
- Increased flexibility and the reduced risk of change
- Unit testing with Vitest
- Installing Vitest in your application
- Writing our first unit test
- E2E tests with Cypress
- Installing Cypress into your project
- Learning the E2E tests' file format and file location
- Writing your first E2E test
- Introducing advanced testing techniques
- Mocking
- Spying
- shallowMount (unit tests only)
- Summary
- Chapter 9: Introduction to Advanced Vue.js Techniques - Slots, Lifecycle, and Template Refs
- Technical requirements
- The power of slots
- Adding default values to a slot
- Slot versus property
- Provide multiple slots with named slots
- Accessing components elements with Template Refs
- Focus an onMounted element
- Access from native validation.
- Deep diving into the lifecycle of a real app
- Adding conditional rendering to the sidebar
- Writing the logic to handle the sidebar states
- Save and read the user preference in localStorage
- Summary
- Chapter 10: Handling Routing with Vue Router
- Technical requirements
- Introducing vue-router
- Learning about vue-router configuration
- Creating our first view
- Navigating between routes
- Using the <
- router-link>
- component
- Programmatic navigation
- Dynamic route matching
- Creating a user profile page
- Creating a user profile route
- Adding navigation using the route name
- Reading route parameters in a route component
- Learning about nested routes
- Applying nested routes to the user
- Reusing routes with alias and redirect
- Summary
- Chapter 11: Managing Your Application's State with Pinia
- Technical requirements
- When to use state management
- Learning about the structure of a Pinia store
- Centralized sidebar state management with Pinia
- Creating our first store
- Creating a post store with Pinia
- Implementing an Add Post action
- Summary
- Chapter 12: Achieving Client-Side Validation with VeeValidate
- Technical requirements
- Understanding forms
- Wrapping your form within the <
- form>
- element
- Do not forget labels
- There is more than just type="text"
- Setting your form to be autocompleted
- Two-way binding with v-model
- Controlling your form using VeeValidate
- Defining your form validation with VeeValidate
- Using VeeValidate rules
- Summary
- Part 4: Conclusion and Further Resources
- Chapter 13: Unveiling Application Issues with the Vue Devtools
- Getting familiar with the Vue Devtools
- Debugging components in your Vue Devtools
- Use cases for the Vue Devtools information panel
- Deep dive into the Vue Devtools Timeline tab.
- Analyzing additional data with Vue Devtools plugins
- The Pinia Vue Devtools plugin
- The vue-router Vue Devtools plugin
- Summary
- Chapter 14: Advanced Resources for Future Reading
- Available tools and resources
- Vue.js documentation
- Newsletter
- Community members
- Request For Comments - RFC
- What is left for Vue.js?
- Miscellaneous
- Core features
- Pinia's features
- Vue-router features
- Contribute back to the community
- Let's look back at what we've achieved
- All about Vue.js
- From the basics and beyond
- From component to components
- Vue.js ecosystem
- Just the tip of the iceberg
- Summary
- Index
- About Packt
- Other Books You May Enjoy.
