[Request New Content] Vue 3 Tutorial

[heksagonnet]

My Request

Hi I would like to request for a tutorial to integrate Strapi with the following tech stack: • Vue 3 script setup composition API • Vite • Graphql • Postgres/Mongodb • SSR

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

Thank you. Regards.

[miracleonyenma]

Hey @heksagonnet @ShadaW11, I would really love to take this up. I'll work on the outline and send it shortly

[miracleonyenma]

Hey @ShadaW11, @heksagonnet, Here's the outline:

How to build a Reviews app with Vue 3, GraphQL, Strapi & PostgreSQL

Introduction

Reviews are a good way to ensure better service from companies and businesses. Review sites like Trustpilot allow visitors to add ratings and reviews for multiple businesses. This involves content modeling and relationships. Strapi is a great choice to manage content on the server-side and send data to the front-end without hassle.

Brief summary

In this tutorial, we'll cover the concept of a Headless CMS and its benefits. We'll set up a working Strapi back-end with PostgreSQL as our database. We'll look into how we can build our Vue 3 front-end using Vite. We're also going to set up GraphQL to communicate with our back-end and add Server-Side Rendering (SSR) to our Vue front-end.

Goal

At the end of this tutorial, we'd have created a simple reviews site where visitors can post reviews and ratings for a particular business.

The back-end would be built using Strapi and PostgreSQL. The front-end would be built using Vue 3 with SSR and GraphQL to communicate with our Strapi back-end. Readers will learn how to integrate Strapi and display content on the front-end with the new Vue 3 Composition API, GraphQL, and SSR.

Outline

• A brief overview of Headless CMS and Strapi In this section, I'll briefly introduce readers to Headless CMSs and why Strapi is a great choice

• A brief overview of Vite, Vue 3, and GraphQL Here, I'll briefly introduce the mentioned technologies

• Prerequisites Here, I'll inform readers of what they need to follow along with the tutorial

• What we're building In this section, I'll show the readers the result of the tutorial and highlight the features of the application which are:

  • Display businesses to review
  • Add a rating to a business
  • Add a review to a business
  • Delete a review
  • Add a business to be reviewed with information

• Set up website back-end with Strapi and PostgreSQL In this section, we'll see how we can:

  • Set up PostgreSQL
  • Set up and configure Strapi and connect to PostgreSQL

• Create collection types for content The collection types we'll create are:

  • Businesses to review
  • Collection of users
  • Collection of reviews

• Set up GraphQL with Strapi

  • Install the Strapi GraphQL Plugin
  • The GraphQL Playground

• Test and deploy Strapi back-end

• Set up Vue 3 with SSR using Vite Here we'll:

  • Use Vite to build a fast Vue application
  • Set up TailwindCSS for styling
  • Set up SSR with our Vue application

• Set up GraphQL with Vue

  • Install Apollo for Vue
  • Add a query to Vue frontend

• Build front-end pages and components

  • Display content from Strapi
  • Add content to Strapi

Conclusion

In this section, we'll wrap up with what we’ve covered in the tutorial

Further Reading

Here, I’ll share useful resources for readers on Strapi and related content.

[ShadaW11]

Hello @miracleonyenma thank you for the outline. My only concern is that we already have a rating app published recently https://strapi.io/blog/build-a-rating-app-with-react-and-strapi

[heksagonnet]

Thanks @miracleonyenma for the outline. I was wondering whether the following can be included: • real-time Apollo websocket subscription with the database. • user upload media functionality

[miracleonyenma]

Hello @ShadaW11 @heksagonnet thanks for your feedback. I guess I'll have to modify the outline to use a notes app with media uploads as the example project instead. This way I'll be able to include " user upload media functionality " as suggested by @heksagonnet . However, I'm not entirely sure if I'll cover "real-time Apollo WebSocket subscription with the database". I don't want the article to be too long or complicated. I'll still see if I can include it.

I hope that's okay? 😊. I'm still open to suggestions.

[ShadaW11]

Hello @miracleonyenma I would suggest you take a look at the blog to see what current posts exist already. Im afraid we have also a number of to do and note apps. Maybe find some other create use case? http://strapi.io/blog

[heksagonnet]

Hi @ShadaW11 @miracleonyenma here are some of my suggestions: • a picture sharing website where authenticated users can upload their own photos and other users can comment on them • a real-time chatting app where authenticated users can send text and pictures

[miracleonyenma]

Hey @heksagonnet, I think your suggestions are really great! I'd love to work on the picture-sharing app with authentication and commenting. I've checked the Strapi blog and there are about two posts already on building a photo gallery app. On the bright side, none of them include:

• Vue 3 script setup composition API
• Vite
• Graphql
• Postgres/Mongodb
• SSR
• Authentication
• Commenting

Sounds like a lot though lol. Looking forward to @ShadaW11's opinions

[ShadaW11]

Hey @heksagonnet awesome suggestions. @miracleonyenma Unfortunately, you are right. we have similar use cases on the blog. I would suggest having a unique new use case for the blog. Maybe you can explore some trending tutorials online and add some suggestions?

[miracleonyenma]

Alright @ShadaW11, thanks @heksagonnet for your awesome suggestions. I guess I'll go ahead and explore a bit to find something good and unique. I'll update you guys as soon as possible so I can edit the outline and proceed hopefully 😊

[miracleonyenma]

Hello, @ShadaW11 @heksagonnet It's been a while, I hope use cases like a quotes app where users can upload short quotes and see them displayed on the app or a code snippet app where users can upload code snippets are good enough for this.

Any suggestions @ShadaW11 @heksagonnet ?

[ShadaW11]

Hello @miracleonyenma thank you for taking the time to suggest another use case. I am sure we can come up with a use case that is widely requested. I do not think a quote app is one of them.

[miracleonyenma]

Thanks for the feedback @ShadaW11, I guess you're right. I'll just keep on suggesting as I really want to see this article on Vue3 made 😅😊

[miracleonyenma]

1. What about the code snippets app I mentioned earlier?

For the code snippets use case, authenticated users can upload and edit code snippets which can be viewed by other users and visitors.

Strapi will be used to handle user data, authentication and the upload and management of code snippets.

Where features of Vue 3 frontend like SSR will be implemented too.

That's a basic rundown of the snippets app.

2. I'm also thinking about a Polls app with Strapi too.

Here, users will be able to create and edit polls. Authenticated users will be able to vote on public polls. All the data, relationships and authentication will be managed with Strapi

@heksagonnet @ShadaW11, what do you think about these use cases? I'll be happy to modify the outline to include on of these use cases or any of your suggestions.

[ShadaW11]

@miracleonyenma Its been a while, apologies for the delay. how about working on this: I'd love to work on the picture-sharing app with authentication and commenting. I've checked the Strapi blog and there are about two posts already on building a photo gallery app. On the bright side, none of them include:

Vue 3 script setup composition API Vite Graphql Postgres/Mongodb SSR Authentication Commenting

[miracleonyenma]

Awesome! @ShadaW11 I would love to take it up. I'll even have the chance to use the comment plugin from the new Strapi marketplace now 🥳

I'll get started on the outline and send it soon

[ShadaW11]

perfect, happy to hear that @miracleonyenma

[miracleonyenma]

Here's the modified outline @ShadaW11 I had to include Nuxt 3 as a higher level solution for SSR, a traditional Vue SSR app would be too complicated to include in the article, plus, the Vue docs also recommends higher level solutions to SSR

How to build a photo sharing app with Nuxt 3, Cloudinary, Postgres and Strapi

A headless CMS is a great tool for building modern applications. Unlike a traditional monolithic CMS like WordPress and Drupal, a headless CMS allows developers to connect their content to any front-end architecture of their choice, allowing for more flexibility, functionality and performance.

With a customizable Headless CMS like Strapi for example, we have the ability to choose a database for our content, integrate a media library and even expand the backend functionality using plugins that can be found on the Strapi marketplace.

Brief summary

In this tutorial, we'll cover the concept of a Headless CMS and its benefits. We'll set up a working Strapi back-end with PostgreSQL as our database and Cloudinary for image uploads. We'll look into how we can build our frontend using Nuxt 3 which gives us SSR support right out of the box and is compatible with Vue3. We're also going to set up GraphQL instead of the default REST API.

Goal

At the end of this tutorial, we'd have created a modern photo sharing app where users can sign in and upload photos and add comments.

The back-end would be built using Strapi and PostgreSQL which we’ll be able to host on Heroku. Comments functionality will be added by including the Strapi comments plugin from the Strapi marketplace.

The front-end will be built using Nuxt 3 with SSR and GraphQL to communicate with our Strapi back-end. Readers will learn how to integrate Strapi with a and display content on the front-end with the new Vue 3 Composition API, GraphQL, and SSR.

Outline

• A brief overview of Headless CMS and Strapi

• A brief overview of Nuxt 3, Vue 3, and GraphQL Here, I'll briefly introduce the mentioned technologies

• Prerequisites Here, I'll inform readers of what they need to follow along with the tutorial

• What we're building In this section, I'll show the readers the result of the tutorial and highlight the features of the application which are:

  • Sign up / Login / Logout
  • Creating a post
  • Commenting on a post
  • Deleting a post

• Set up website back-end with Strapi and PostgreSQL In this section, we'll see how we can:

  • Set up PostgreSQL
  • Set up and configure Strapi and connect to PostgreSQL
  • Create collection types for content
  • Set up GraphQL with Strapi
    • Install the Strapi GraphQL Plugin
    • The GraphQL Playground
  • Test Strapi back-end

• Set up Nuxt 3 app Here we'll:

  • Set up a new Nuxt 3 application with SSR
  • Set up TailwindCSS for styling
  • Set up GraphQL with Nuxt
  • Add a query to Nuxt frontend
  • Build authentication functionality
  • Build the photo sharing functionality

• Conclusion In this section, we'll wrap up with what we’ve covered in the tutorial

• Further Reading Here, I’ll share useful resources for readers on Strapi and related content.

I hope this works! I'll be happy to hear any feedback or suggestions so that we can go ahead ✨

[heksagonnet]

Awesome outline! Just wondering, would the GraphQL connection be in real-time?

[ShadaW11]

@miracleonyenma awesome please go ahead

[miracleonyenma]

Hey @heksagonnet, I'll try to see if it can be realtime. There are a lot of features bundled into this piece already and I don't want to make it too complicated.

Alright @ShadaW11, thanks ✨ I'll go ahead and work on the draft.

[miracleonyenma]

Hey @ShadaW11 @TiaraOluwanimi @heksagonnet Sorry it took so long to get the draft ready but I finally had the time to work on it and I'll be making my submission now.

You can find the draft here - https://www.dropbox.com/scl/fi/um4xooeesmwy856c0exzs/How-to-build-a-photo-sharing-app-with-Nuxt-3-GraphQL-Cloudinary-Postgres-and-Strapi.paper?dl=0&rlkey=vy55ge9z7n1nn8g7qyxxuyqiz

Thanks!

[miracleonyenma]

Hey @TiaraOluwanimi, thanks for reviewing the article ✨ Should I go ahead and submit the invoice now?

[PaulBratslavsky]

@TiaraOluwanimi has this article been published yet? Just want to follow up, looking to close issues that have been completed.

[dessireugarte]

Hello @miracleonyenma @PaulBratslavsky 👋 This article is published https://strapi.io/blog/how-to-build-a-photo-sharing-app-with-nuxt-3-graph-ql-cloudinary-postgres-and-strapi You can now submit your invoice here

@malgamves will give it a follow-up

[miracleonyenma]

Awesome! Finally!! 🤸🏾‍♂️🤸🏾‍♂️ Thanks so much @dessireugarte

I just submitted the invoice @malgamves 😊

🙌🏾

[malgamves]

nice, on it!

[malgamves]

hey @miracleonyenma the Nuxt team reached out to us and they would like to know if you can upgrade your article to use the Nuxt Strapi module so they can promote it. Let me know if that's possible

[miracleonyenma]

Hey @malgamves 👋🏾

I think that's wonderful! It's definitely possible. I would love to 🙌🏾

[malgamves]

Awesome @miracleonyenma , could you make the relevant edits to the DropBox Paper and then tag @TiaraOluwanimi for a review after?