DEV Community

Cover image for Creating a Re-usable Vue 3 Store Plugin with Typescript
Jacob Goodwin
Jacob Goodwin

Posted on

3

Creating a Re-usable Vue 3 Store Plugin with Typescript

In a previous article, I described how to use a library I created called vue-dfs-store for creating and accessing re-usable global data stores in Vue 3 applications.

To expound on the topic, I have created a video tutorial demo on how to create a store to maintain a list of favorite restaurants. The demo will work with an asynchronous API to fetch, create, update, and delete a list of favorite restaurants which will be maintained in (vue-dfs) store. You'll learn how to make your state read-only and how to update the state via "trackable" mutations.

A few tutorials already touch on the topic of providing a reactive object and functions to update this state down the application tree. However, the ones I have seen don't use Typescript, which is one of the benefits of Vue 3 and the composition API. They also don't show how you might create your own "API" for accessing and modifying the state.

What's more? I'll be showing you how to create Vue plugins and an example of a Vite development environment with Typescript and TailwindCSS setup!

I hope these additions will be helpful to intermediate and advanced Vue developers who are interested in using the latest and greatest!

Two Good Introductions to Creating Stores with Vue's "Reactive" Objects

Some Related Content

Here's some related, and maybe prerequisite, content that you might find useful while checking out my video!

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 (2)

Collapse
 
rafarel profile image
Rafarel

Thanks for the article and the video, I learned a lot about reactivity in Vue3 😁

Collapse
 
jacobsngoodwin profile image
Jacob Goodwin

Thanks! I got a little sloppy going over the source code, but I'm glad you were able to learn some things!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs