Strapi tutorial with Pinia, the intuitive store for Vue.js

[vcoisne]

My Request

This is a request from Linkedin.

Community vote 👍 Upvote if you like this topic 🚀 If you can make the article/video!

Thank you.

[Marktawa]

Hey @vcoisne

I'm interested in writing an article for this topic.

[vcoisne]

@Marktawa awesome! can you share an outline so that we can define the level of complexity / compensation ?

[Marktawa]

Sure @vcoisne

Build a Shopping Cart System using Vue, Pinia, and Strapi

Outline

Introduction

Create a shopping cart system using Vue.js for the frontend, Pinia for state management, and Strapi for backend services.

• Project Explanation
• Overview of technologies to be used: Vue.js, Pinia, and Strapi
• Importance of each technology in the project.

Strapi Backend Setup

• Strapi project setup
• Define "Product" content type collection with name and price fields
• Populate "Product" collection with sample product data
• Expose Strapi Backend API

Integrate Vue.js with Strapi

• Vue.js frontend setup
• Fetch product data from Strapi API
• Add Header, Cart components
• Display product listings on Vue app home page
• Create Cart page to display cart contents
• Add Styling

Integrate Pinia with Vue frontend

• Add Pinia to Vue.js project
• Define global stores for products, cart management
• Define Pinia actions to fecth data from Strapi backend and list products on home page

Manage Cart State with Pinia

• Define actions and mutations for adding,removing, and updating cart items
• Implement getters for total price and quantities
• Access cart data in Vue components using Pinia

Conclusion

Recap of what was achieved, lessons learned, and next steps for further enhancements.

[vcoisne]

Hi @Marktawa this outline looks great and seems intermediate level of complexity. Please proceed with a draft.

[Theodore-Kelechukwu-Onyejiaku]

Hi @Marktawa ,

Thank you for your contribution. Do you mind sharing the status of your draft? Meanwhile, would you be willing to use Strapi 5?

Please let me know.

[Marktawa]

Hi @Theodore-Kelechukwu-Onyejiaku I am still working on the draft. Yes, I am willing to use Strapi 5.

[Theodore-Kelechukwu-Onyejiaku]

Thank you. Please let me know when it is ready. It is long overdue.