DEV Community

Cover image for Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase #1 Getting Started
Aaron K Saunders
Aaron K Saunders

Posted on β€’ Edited on

2

Vue JS Essentials: A Beginners Vue JS Series on Using Pinia, Vitest, and Supabase #1 Getting Started

In this video series, we'll show you how to build a multistep wizard with form validation and database persistence using Vue JS and related technologies. We'll start with the basics of Vue JS and add Pinia for state management, Vue-use-form for form validation, and Vitest for testing.

This series will be spread out across multiple videos, but this first video will provide an overview and demo of the solution we're building, as well as cover the setup and configuration of the environment.

We'll then walk you through building three basic screens for the application, integrating Pinia for state management, and writing a simple test for the application component, as well as a simple test for Pinia. As we continue through the application, we'll create more functionality and write more robust tests.

What Libraries We Are Using In Series

Vuejs - The Progressive JavaScript Framework. An approachable, performant, and versatile framework for building web user interfaces.
https://vuejs.org/

Pinia -The intuitive store for Vue.js. Type Safe, Extensible, and Modular by design. Forget you are even using a store.
https://pinia.vuejs.org/

Vitest - Blazing Fast Unit Test Framework. A Vite-native unit test framework. It's fast!
https://vitest.dev/

vue-use-form - A composition api form validator for vue
https://vue-use-form.netlify.app/

What Is Cover In First Video Of Series

  • Learn how to build a multistep wizard with form validation and database persistence using Vue JS and related technologies.
  • Discover how to use Pinia for state management, Vue-use-form for form validation, and Vitest for testing.
  • Follow along with a step-by-step tutorial that walks you through building three basic screens for the application.
  • Get hands-on experience with integrating Pinia for state management and writing tests for the application component and Pinia.
  • Gain a solid foundation in Vue JS, Pinia, Vue-use-form, and Vitest that you can use to build more complex applications in the future.

By the end of this video series, you'll have a solid foundation for building a multistep wizard with form validation and database persistence in Vue JS, Pinia, Vue-use-form, and Vitest.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
aaronksaunders profile image
Aaron K Saunders β€’

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay