Architecting Vue.js 3 Enterprise-Ready Web Applications: Build and deliver scalable and high-performance enterprise-ready applications with Vue and JavaScript

Architecting Vue.js 3 Enterprise-Ready Web Applications
Contributors
About the author
About the reviewer
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
    Download the example code files
    Download the color images
    Conventions used
    Get in touch
    Share Your Thoughts
    Download a free PDF copy of this book
Part 1: Getting Started with Vue.js
Chapter 1: Getting Started with Vue.js 3
    Technical requirements
    Overview of Vue.js
    Introducing Vue.js 3
        Vue 3 performance
        Tree-shaking support
        The Composition API
    Building your first Vue.js 3 app
        Creating a Vue 3 app with Vite
        What is the Strapi CMS?
    Summary
Chapter 2: Using Libraries for Large-Scale Applications
    Technical requirements
    Exploring large-scale Vuex
        Vuex modules
        The Vuex state
        Vuex getters
        Vuex mutations
        Vuex actions
    Structuring with the repository pattern
        Overview of the repository pattern
    Creating a repository folder
        Creating a clients folder
        Creating an xxxClient.js class
        Creating an individual repository class
        Creating a RepositoryFactory.js class
        Using the repository pattern
    Structuring Vue navigation with Vue Router
        The folder structure
        The index.js file
        Hash mode
        HTML5 mode
        The combine.js file
        Adding the router to Vue
    Summary
Part 2: Large-Scale Apps and Scaling Performance in Vue.js 3
Chapter 3: Scaling Performance in Vue.js 3
    Technical requirements
    Why do we need Vue.js performance optimization?
    The primary reasons for poor Vue performance
    Checking your Vue application’s bundle size
        Generating a report
        Running the npm build command
    Optimizing the performance of an enterprise Vue application
        Asynchronous/lazy component loading
        WebP images and image compression
        Code splitting
    Summary
Chapter 4: Architecture for Large-Scale Web Apps
    Technical requirements
    Understanding file architecture and structure
        Predictability in Vue 3
    Different frontend architectural patterns
        Micro frontend architecture
        Atomic Design
        Storybook
    Implementing Storybook in Vue.js 3
    Implementing internationalization and localization
        Benefits of internationalizing software
        Installing Vue I18n
    Summary
Chapter 5: An Introduction to GraphQL, Queries, Mutations, and RESTful APIs
    Technical requirements
    An introduction to GraphQL
        What is GraphQL?
        Features of GraphQL
        Why use GraphQL instead of REST?
        The difference between GraphQL and RESTful APIs
    Understanding queries and mutations in GraphQL
        Using queries
        Using mutations
    Integrating GraphQL Apollo Client with Vue 3
        Installation
        Structuring GraphQL
        JWT authentication for sign in/sign up
    Summary
Chapter 6: Building a Complete Pinterest Clone with GraphQL
    Technical requirements
    An introduction to Strapi
    Scaffolding a Strapi project
    Building the collections
        Seeding data
    Building a Vue 3 Pinterest app
        Generating the Cards component
    Connecting the frontend and backend
        The auth folder
        The photos folder
        The users folder
    Summary
Part 3: Vue.js 3 Enterprise Tools
Chapter 7: Dockerizing a Vue 3 App
    Technical requirements
    Overview of Docker
        What is Docker?
    Implementing Docker with Vue.js 3
        Prerequisite
        Example project
    Dockerizing Vue.js and Node.js with Docker Compose
        Overview of Docker Compose
        Running the app on Docker Compose
    Summary
Part 4: Testing Enterprise Vue.js 3 Apps
Chapter 8: Testing and What to Test in Vue.js 3
    Technical requirements
    Overview of testing
        What is software testing?
        Why software testing is important
        The benefits of software testing
    Testing in software engineering
        Types of software testing
    What to test
        Testing strategy
        What you should test
        What you should not test
    Testing a basic Vue.js 3 app
        Creating a test folder
        Writing a basic unit test
    Component testing in Vue.js 3
        Writing a basic component test
    Summary
Chapter 9: Best Practices in Unit Testing
    Technical requirements
    Introduction to unit testing
        What is unit testing?
        The importance and benefits of unit testing
    Best practices in unit test creation
        Arrange, act, and assert
        Write deterministic tests
        Write good test names and descriptions
        Write tests before or during development (TDD)
        Using mocks and stubs
        Leverage automation testing
    JavaScript unit testing
        Popular JavaScript testing frameworks
    Unit testing a Vue.js 3 app
        What to test
        Running unit tests manually
    Summary
Chapter 10: Integration Testing in Vue.js 3
    Technical requirements
    Introduction to integration testing
        What is integration testing?
        Importance of integration testing
        Benefits of integration testing
        Best practices when creating integration tests
        JavaScript integration testing
    Testing a basic Vue app
        Writing a basic integration test
    Testing integrated components
    Summary
Chapter 11: Industry-Standard End-to-End Testing
    Technical requirements
    Introduction to E2E testing
    What is E2E testing?
        Importance of E2E testing
        Benefits of E2E testing
        Best practices in E2E test creation
    JavaScript E2E testing
        Selenium WebDriver
        Cypress
        Playwright
        Puppeteer
        Karma
    E2E testing a Vue.js 3 app
        Setting up Cypress
        Creating the test file
        Running the test
    Summary
Part 5: Deploying Enterprise-ready Vue.js 3
Chapter 12: Deploying Enterprise-Ready Vue.js 3
    Technical requirements
    Introduction to CI/CD
    Overview of CI/CD
        Continuous integration
        Continuous delivery
        Continuous deployment
    What is a deployment pipeline?
        Elements of a deployment pipeline
        Overview of a deployment pipeline
    Overview of GitHub Actions
        Jobs in the deployment pipeline
    Creating the deployment pipeline with GitHub Actions
    Deploying to AWS
        Using Docker
        Provisioning AWS resources
        Pipeline for the production environment
    Summary
Chapter 13: Advanced Vue.js Frameworks
    Technical requirements
    Introduction to Vue frameworks
        Top Vue frameworks
    Understanding Nuxt.js and how it works
        Uses of Nuxt.js
        How does Nuxt.js work?
        Benefits of Nuxt.js
        Creating a Nuxt.js app
        Nuxt.js pages and routing system
    What is Gridsome?
        What is Gridsome used for?
        How does Gridsome work?
        Benefits of Gridsome
        Creating a Gridsome app
    Summary
Index
    Why subscribe?
Other Books You May Enjoy
    Packt is searching for authors like you
    Share Your Thoughts
    Download a free PDF copy of this book