How to Build a Photo Sharing App with Nuxt 3, GraphQL, 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 frontend 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.

Overview

In this tutorial, we'll cover the concept of a Headless CMS and its benefits. We'll set up a working Strapi backend with PostgreSQL as our database and Cloudinary for image uploads.

We'll also 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.

Goals

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.

We will learn how to set up Strapi with Postgres and integrate our Strapi backend with the Strapi comments plugin. We’ll also be able to build the frontend with the new Vue 3 Composition API, GraphQL, and SSR.

An Overview of Headless CMS, Strapi & Postgres

Let’s take a quick look at these concepts and technologies that are at the core of our backend.

Headless CMS

Headless CMS is a type of Content Management System (CMS) that usually provides an Application Programming Interface (API) which allows the frontend to be built independently from the backend (or CMS). Unlike traditional CMS options like WordPress, a Headless CMS allows developers to build the frontend of their application with any framework of their choice.

Strapi

Strapi is a world-leading open-source headless CMS. Strapi makes it very easy to build custom APIs either REST APIs or GraphQL that can be consumed by any client or front-end framework of choice.

Strapi runs an HTTP server based on Koa, a back-end JavaScript framework. It also supports databases like SQLite and Postgres (which we’ll be using in this tutorial).

Postgres

PostgreSQL, also known as Postgres, is a free and open-source relational database management system emphasizing extensibility and SQL compliance. As one of the databases Strapi currently supports, Postgres is a solid choice over SQLite and we’ll see how we can set it up.

Prerequisites

To follow this tutorial, you’ll need to have a few things in place, including:

• Basic JavaScript knowledge,
• Node.js (I’ll be using v16.13.0), and
• A code editor. I’ll be using VScode; you can get it from the official website.

Step 1: Set up Backend with Strapi and Postgres

First, we’ll create a new Strapi app. To do this:

• Navigate to the directory of your choice and run:

    yarn create strapi-app photo-app-api

• Next, Choose the installation type:

  Quickstart is recommended, which uses the default database (SQLite)

Once the installation is complete, the Strapi admin dashboard should automatically open in your browser at http://localhost:1337/admin/.

• Next, download and install Postgres for your machine from the Postgres download page.

For windows users, refer to this guide on how to Set Up a PostgreSQL Database on Windows. Also, refer to the Postgres documentation to see how to create a new database.

• Once installed, start the Postgres server and obtain the port, username, and password.

• To create a new database, in your terminal, run:

    createdb -U postgres photosdb

• Then, enter the password for your postgres superuser

Configure Postgres in Strapi

To use PostgreSQL in Strapi, we’ll add some configurations in our ./config/database.js file.

• Open the ./config/database.js and paste the below code in the file:

1    // ./config/database.js
2    module.exports = ({ env }) => ({
3      connection: {
4        client: 'postgres',
5        connection: {
6          host: env('DATABASE_HOST', 'localhost'),
7          port: env.int('DATABASE_PORT', 5432),
8          database: env('DATABASE_NAME', 'photosdb'),
9          user: env('DATABASE_USERNAME', 'user'),
10          password: env('DATABASE_PASSWORD', '1234'),
11          schema: env('DATABASE_SCHEMA', 'public'), // Not required
12          ssl: {
13            rejectUnauthorized: env.bool('DATABASE_SSL_SELF', false),
14          },
15        },
16        debug: false,
17      },
18    });

• In the connection object, we set the client to postgres. This client is the PostgreSQL database client to create the connection to the DB.
• The host is the hostname of the PostgreSQL server we set it to localhost.
• The port is set to 5432, and this is the default port of the PostgreSQL server.
• The database is set to the photosdb, and this is the name of the database we created in the PostgreSQL server.
• The password is the password of our PostgreSQL server.
• The username is the username of our PostgreSQL. It is set to Postgres because it is the username of our PostgreSQL server.
• The schema is the database schema, and it is set to the public here. This schema is used to expose databases to the public.

With this, our Strapi is using PostgreSQL to store data.

• Now, start Strapi.

    yarn develop

N/B: If you encounter an error: Cannot find module 'pg', install pg . Run:

    yarn add pg 
    #OR
    npm install pg

Once the app has started, it should open the admin registration page at http://localhost:1337. Proceed to create an admin account.

Set up GraphQL with Strapi

To get started with GraphQL in our Strapi backend, we’ll install the GraphQL plugin first. To do that:

• Stop the server and run the following command:

    yarn strapi install graphql
    #OR
    npm run strapi install graphql

• Then, start the app and open your browser at http://localhost:1337/graphql. We’ll see the interface (GraphQL Playground) that will help us write GraphQL query to explore our data.

Create Post Content Type

Let’s create the content type for our posts.

• Navigate to CONTENT-TYPE BUILDER > COLLECTION TYPES > CREATE NEW COLLECTION TYPE.

• First, in the Configurations modal, set the display name - **Post**, then create the fields for the collection

  • Caption - Text (Long Text)
  • photo - Media (Multiple media)
  • user - Relation (one-to-many relation with Users from users-permissions)

The collection type should look like this:

• Click on SAVE and wait for the server to restart.

Set up Strapi Comments Plugin

Finally, we have to install the Strapi comments plugin.

• Stop the server and run:

    yarn add strapi-plugin-comments@latest

• Next, in order to properly add the types and access our comments actions with GraphQL, we have to create a plugin config for comments.

1    // ./config/plugins.js
2    
3    module.exports = ({ env }) => ({
4      //...
5      comments: {
6        relatedContentTypes: {
7          posts: {
8            contentManager: true,
9            isSingle: true,
10            key: "title",
11            value: "id",
12          },
13        },
14        enabled: true,
15        config: {
16          enabledCollections:["api::post.post"],
17          badWords: false,
18          moderatorRoles: ["Authenticated"],
19          approvalFlow: ["api::post.post"],
20          entryLabel: {
21            "*": ["Title", "title", "Name", "name", "Subject", "subject"],
22            "api::post.post": ["MyField"],
23          },
24          reportReasons: {
25            MY_CUSTOM_REASON: "MY_CUSTOM_REASON",
26          },
27          gql: {
28            // ...
29          },
30        },
31      },
32      graphql: {
33      }
34    });

You can see more information on configuration from the Strapi Comments plugin docs.

• We now have to rebuild and start our app; run:

    yarn build && yarn develop

When we open our admin dashboard, the Comments plugin should appear in the Plugins section of Strapi sidebar.

• Next, we’ll configure our Comments plugin. Navigate to SETTINGS > COMMENTS PLUGIN > CONFIGURATION then confgure the following settings:

  1- General configuration - *Enable comments only for* : **`Posts`**
  2- Additional configuration  
  3- Bad words filtering: **`Enabled`**
  4- GraphQL queries authorization: **`Enabled`**

• Click on SAVE to save the configuration and restart the server for the changes to take effect.

Configure Permissions for Public and Authenticated Users

By default, we won't be able to access any API from Strapi unless we set the permissions.

• To set the permissions, navigate to SETTINGS > USERS & PERMISSIONS PLUGIN > ROLES.

• Go to PUBLIC and enable the following actions for

  • Posts

    • ✅ find
    • ✅ findOne

• Comments
  • ✅ findAllFlat
  • ✅ findAllInHierarchy

• Users-permissions
  • ✅ User > findOne

  • ✅ User > find

Next, to set permissions for authenticated users, go to AUTHENTICATED and enable the following actions for

• Posts - Enable all ✅

• Comments - Enable all ✅

• Users-permissions
  • ✅ User > count
  • ✅ User > findOne
  • ✅ User > find

Step 2: Setting up the Frontend

In the second stage, we are going to set up our frontend.

• To create our Nuxt 3 frontend, run:

    npx nuxi init photos-app-frontend

• Next, navigate into the newly-created project folder and install.

    cd photos-app-frontend
    yarn install
    #OR
    npm install

Add Tailwind CSS

Once the installation is complete, add Tailwind CSS to the project using the @nuxt/tailwind module. We’ll also install the tailwind form plugin. This module helps set up Tailwind CSS (version 3) in our Nuxt 3 application in seconds.

• Run:

    yarn add --dev @nuxtjs/tailwindcss @tailwindcss/forms
    #OR
    npm install --save-dev @nuxtjs/tailwindcss @tailwindcss/forms

• Add it to the modules section in nuxt.config.ts:

1    // nuxt.config.ts
2    // ...
3    export default defineNuxtConfig({
4      modules: ['@nuxtjs/tailwindcss']
5    })

• Create tailwind.config.js by running:

    npx tailwindcss init

• Add Tailwind form plugin to tailwind.config.js

1    // tailwind.config.js
2    module.exports = {
3      theme: {
4        // ...
5      },
6      plugins: [
7        require('@tailwindcss/forms'),
8        // ...
9      ],
10    }

• Next, let’s create our /.assets/css/main.css file:

1    // ./assets/css/main.css
2    
3    @tailwind base;
4    @tailwind components;
5    @tailwind utilities;

• In the nuxt.config.ts file, enter the following:

1    // ./nuxt.config.ts
2    // ...
3    export default defineNuxtConfig({
4      modules: ['@nuxtjs/tailwindcss'],
5      tailwindcss: {
6        cssPath: '~/assets/css/main.css',
7      }
8    })

Add Heroicons

We’ll use Heroicons for our icon library. To get started, install the Vue library:

    yarn add @heroicons/vue
    #OR
    npm install @heroicons/vue

Step 3: User Registration and Authentication

We want users to be able to register, sign in, and sign out. To do that, we first need to define our user and session state.

Configure Runtime Config

We’ll be using Nuxt runtime config to access global config in our application like the Strapi GraphQL URLs. In the ./nuxt.config.ts file,

1    // ./nuxt.config.ts
2    
3    import { defineNuxtConfig } from 'nuxt'
4    export default defineNuxtConfig({
5      // ...
6      runtimeConfig: {
7        public: {
8          graphqlURL: process.env.STRAPI_GRAPGHQL || 'http://localhost:1337/graphql',
9          strapiURL: process.env.STRAPI_URL || 'http://localhost:1337',
10        }
11      },
12    })

Click here to view the code on GitHub.

This way, we can have access to these URLs throughout our application.

Create Application State

Nuxt 3 provides useState composable to create a reactive and SSR-friendly shared state across components.

• Create a new file ./composables/state.js and enter the following:

1    // ./composables/state.js
2    
3    // READ USER STATE
4    export const useUser = () => useState("user", () => ({}));
5    // SET USER STATE
6    export const useSetUser = (data) => useState("set-user", () => (useUser().value = data));
7    // USE SESSION STATE
8    export const useSession = () => useState("session", () => ({ pending: true, data: null }));
9    // SET SESSION STATE
10    export const useSetSession = (data) => {
11      // save session state to localstorage
12      localStorage.setItem("session", JSON.stringify(data));
13      useState("set-session", () => {
14        // update session state
15        useSession().value.pending = false;
16        useSession().value.data = data;
17        // update user state
18        useUser().value = data?.user;
19      });
20    };

Click here to view the code on Github

Here, we’re using [useState](https://v3.nuxtjs.org/guide/features/state-management), an SSR-friendly [ref](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key. The useState function accepts two parameters, the key which is a string and a function. So, we create state for useUser & useSession which will be used to read/get the current user and session state. setUser & setSession will be used to set state with setSession saving the session data to localStorage and setting the useUser state as well.

Next, we’ll create a composable function that we’ll use to send requests to our Strapi backend.

• Create a new file ./composables/sendReq.js

1    // ./composables/sendReq.js
2    
3    // function to send requests
4    // pass GraphQL URL and request options
5    export const sendReq = async (graphqlURL, opts) => {
6      try {
7        let res = await fetch(graphqlURL, {
8          method: "POST",
9          // fetch options
10          ...opts,
11        });
12        let result = await res.json();
13        console.log(result.errors);
14        // Handle request errors
15        if (result.errors) {
16          result.errors.forEach((error) => alert(error.message));
17          // Throw an error to exit the try block
18          throw Error(JSON.stringify(result.errors));
19        }
20        // save result response to page data state
21        return result.data;
22      } catch (error) {
23        console.log(error);
24        return {
25          errors: error,
26        };
27      }
28    }

Click here to view the code on GitHub

Here, we create a sendReq function which will be used to send requests and return the data or errors. In order to catch errors from the request, we check if result.errors and then loop through errors array to alert each error message. Then throw the Error to exit the try block to the catch block.

Create Default Layout

Now, let's proceed to create our authentication page.

• First, create a default layout for our application. Create a new layout file layouts/default.vue

1    <!-- layouts/default.vue -->
2    <template>
3      <div class="layout default">
4        <SiteHeader />
5        <slot />
6      </div>
7    </template>

View code on GitHub

• Let’s create the <SiteHeader/> component. In a new file components/SiteHeader.vue enter the following:

1    <!-- ./components/SiteHeader.vue -->
2    <script setup>
3    import { RefreshIcon } from "@heroicons/vue/outline";
4    const session = useSession();
5    console.log({ session: session });
6    </script>
7    <template>
8      <header class="site-header">
9        <div class="wrapper">
10          <NuxtLink to="/">
11            <figure class="site-logo"><h1>Photos</h1></figure>
12          </NuxtLink>
13          <nav class="site-nav">
14            <!-- Hide if session state is pending -->
15            <ul v-if="!session.pending" class="links">
16              <!-- Render Register link if no user in session -->
17              <li v-if="!session.data?.user" class="link">
18                <NuxtLink to="/auth/register">
19                  <button class="cta">Register</button>
20                </NuxtLink>
21              </li>
22              <!-- Render Sign in link if no user in session -->
23              <li v-if="!session.data?.user" class="link">
24                <NuxtLink to="/auth/sign-in">
25                  <button class="cta">Sign in</button>
26                </NuxtLink>
27              </li>
28              <!-- Else, Render Sign out link if user in session -->
29              <li v-else class="link">
30                <NuxtLink to="/auth/sign-out">
31                  <button class="cta">Sign out</button>
32                </NuxtLink>
33              </li>
34            </ul>
35            <!-- Display loading if session state is pending -->
36            <div v-else class="cta">
37              <RefreshIcon class="icon stroke animate-rotate" />
38            </div>
39          </nav>
40        </div>
41      </header>
42    </template>
43    
44    <style scoped>
45    /* ... */
46    </style>

View complete code on GitHub

In the <script>, we get the session state from useSession() which is automatically imported by Nuxt. Using v-if, we conditionally render the links to our auth pages depending on if session.user exists or not.

• Next, we have to configure our app to use layouts. In ./app.vue:

1    <!-- ./app.vue -->
2    <script setup>
3    import "@/assets/css/main.css";
4    const router = useRouter();
5    const session = useSession();
6    onMounted(() => {
7      // set session from localStorage
8      useSetSession(JSON.parse(localStorage.getItem("session")));
9    
10      // route guard to prevent users from routing to 
11      // sign in and register page when alrady logged in
12      router.beforeEach((to, from) => {
13        if ((to.path === "/auth/register" || to.path === "/auth/sign-in") && session.value?.jwt) {
14          return false;
15        }
16      });
17    });
18    </script>
19    <template>
20      <NuxtLayout name="default">
21        <!-- Render page depending on route -->
22        <NuxtPage />
23      </NuxtLayout>
24    </template>

View code on GitHub

In the <script>, we set the session from localStorage and use useRouter to implement a route guard to prevent routing to register and sign-in pages when already signed in.

Now, we create our home page ./pages/index.vue:

1    <!-- ./pages/index.vue -->
2    <script setup>
3    const user = useUser();
4    </script>
5    <template>
6      <main class="home-main">
7        <div class="wrapper">
8          <header>
9            <h1 class="text-4xl font-bold">Hey, {{ user?.username }}</h1>
10          </header>
11        </div>
12      </main>
13    </template>
14    <style scoped>
15      /* ... */
16    </style>

View code on GitHub

Here, in the <script>, we simply get the user state from useUser(). In the <template/>, we display the user username. Next, we’ll create our authentication pages

Create Authentication Pages

• First, we’ll create the register page at ./pages/auth/register.vue

1    <!-- ./pages/register.vue -->
2    <script setup>
3    
4    // retrive GraphQL URL from runtime config
5    const {
6      public: { graphqlURL },
7    } = useRuntimeConfig();
8    
9    // session & set session
10    const session= useSession();
11    const setSession = useSetSession;
12    
13    // page state
14    const isLoading = ref(false);
15    
16    // form state
17    const name = ref("");
18    const email = ref("");
19    const password = ref("");
20    
21    // handle form submit
22    const handleRegister = async (e) => {
23      e.preventDefault();
24      if (name && email && password) {
25        isLoading.value = true;
26    
27        // GraphQL Register Query
28        let registerQuery = {
29          query: `mutation($username: String!, $email: String!, $password: String!,){
30          register(input: {username: $username, email: $email, password: $password}){
31            jwt
32            user{
33              id
34              username
35              email
36            }
37          }
38        }`,
39          variables: {
40            username: name.value,
41            email: email.value,
42            password: password.value,
43          },
44        };
45    
46        try {
47          const { register, errors } = await sendReq(graphqlURL, { body: JSON.stringify(registerQuery), headers: { "Content-Type": "application/json" } });
48          
49          // throw error if any
50          if (errors) throw Error(errors);
51    
52          // set session, notify and navigate to the home page
53          setSession(register);
54          alert("Registeration successful!");
55          navigateTo("/");
56        } catch (error) {
57          console.log(error);
58        } finally {
59          isLoading.value = false;
60        }
61      }
62    };
63    </script>
64    <template>
65      <main class="site-main register-main">
66        <div class="wrapper">
67          <div class="form-cont">
68            <form @submit="handleRegister" class="form auth-form">
69              <div class="wrapper">
70                <header class="form-header">
71                  <h3 class="text-3xl mb-4">Sign Up</h3>
72                </header>
73                <section class="input-section">
74                  <div class="form-control">
75                    <label for="name">Name</label>
76                    <input v-model="name" id="name" name="name" type="text" class="form-input" required />
77                  </div>
78                  <div class="form-control">
79                    <label for="email">Email address</label>
80                    <input v-model="email" id="email" name="email" type="email" class="form-input" required />
81                  </div>
82                  <div class="form-control">
83                    <label for="password">Password</label>
84                    <input v-model="password" id="password" name="password" type="password" class="form-input" required />
85                  </div>
86                  <div class="action-cont">
87                    <button :disabled="isLoading" class="cta">{{ isLoading ? "..." : "Register" }}</button>
88                  </div>
89                </section>
90              </div>
91            </form>
92          </div>
93        </div>
94      </main>
95    </template>

View code on GitHub

In the <script>, we have handleRegister() function which gets called when the registration form is submitted. We get the form data from the name, email and password refs and v-model on the input elements in the <template>.

Then, we create a GraphQL mutation with the data inserted as variables. We’re using the Fetch API to send the request to our Strapi GraphQL endpoint which will be configured in our Nuxt runtimeConfig.

If the request was succesful, we save the response to session, if there were errors, we throw it. These are the values from our query that will be returned:

1    jwt
2    user{
3      id
4      username
5      email
6    }

Next, we’ll create the sign in page.

• Create a new file ./pages/auth/sign-in.vue

1    <!-- ./pages/auth/sign-in.vue -->
2    <script setup>
3    
4    // retrive GraphQL URL from runtime config
5    const {
6      public: { graphqlURL },
7    } = useRuntimeConfig();
8    
9    // session & user state
10    const session = useSession();
11    const setSession = useSetSession;
12    
13    // page state
14    const isLoading = ref(false);
15    const data = ref({});
16    const error = ref({});
17    
18    // form state
19    const name = ref("");
20    const email = ref("");
21    const password = ref("");
22    
23    // handle form submit
24    const handleSignIn = async (e) => {
25      e.preventDefault();
26      if (name && email && password) {
27        // GraphQL Sign in Query
28        let signInQuery = {
29          query: `mutation( $email: String!, $password: String!) {
30            login(input: { identifier: $email, password: $password }) {
31              jwt,
32              user{
33                id
34                username
35                email
36              }
37            }
38          }`,
39          variables: { email: email.value, password: password.value },
40        };
41        try {
42          isLoading.value = true;
43          const { login, errors } = await sendReq(graphqlURL, { body: JSON.stringify(signInQuery), headers: { "Content-Type": "application/json" } });
44          if (errors) throw Error(errors);
45          setSession(login);
46    
47          // notify and navigate to the home page
48          alert("Sign in successful!");
49          navigateTo("/");
50        } catch (error) {
51          console.log(error);
52        } finally {
53          isLoading.value = false;
54        }
55      }
56    };
57    </script>
58    <template>
59      <main class="site-main sign-in-main">
60        <div class="wrapper">
61          <div class="form-cont">
62            <form @submit="handleSignIn" class="form auth-form">
63              <div class="wrapper">
64                <header class="form-header">
65                  <h3 class="text-3xl mb-4">Sign In</h3>
66                </header>
67                <section class="input-section">
68                  <div class="form-control">
69                    <label for="email">Email address</label>
70                    <input v-model="email" id="email" name="email" type="email" class="form-input" required />
71                  </div>
72                  <div class="form-control">
73                    <label for="password">Password</label>
74                    <input v-model="password" id="password" name="password" type="password" class="form-input" required />
75                  </div>
76                  <div class="action-cont">
77                    <button :disabled="isLoading" class="cta">{{ isLoading ? "..." : "Sign in" }}</button>
78                  </div>
79                </section>
80              </div>
81            </form>
82          </div>
83        </div>
84      </main>
85    </template>

View code on GitHub

The sign-in page is basically the same as the register page. Except we’re using the signInQuery which returns the response with login. Also, we remove the name input from the form in the <template>.

The sign-out page is pretty simple. Create a new file ./pages/sign-out.vue.

1    <!-- ./pages/sign-out.vue -->
2    
3    <script setup>
4    onMounted(() => {
5      // set session to null
6      useSetSession(null);
7      
8      setTimeout(() => {
9        alert("You've signed out. See you back soon!");
10        navigateTo("/");
11      }, 1000);
12    });
13    </script>
14    <template>
15      <main class="sign-out-main auth-main">
16        <div class="wrapper">
17          <h3 class="text-3xl">Signing Out...</h3>
18        </div>
19      </main>
20    </template>

View code on GitHub

Here, we simply set the session state to null, which in turn sets the localStorage and user state to null.

Now, let’s try to register a new user.

Awesome.

Step 4: Fetch and Display Posts

Let’s hop back into our admin dashboard and create a new entry in the Post collection type with our new user.

Click on SAVE and PUBLISH.

Create Post Component

We’ll have to create a Post component which will be used to display a post.

• Create a new file ./components/Post.vue

1    <!-- ./components/Post.vue -->
2    <script setup>
3    // import icons
4    import { ChatIcon, PaperAirplaneIcon } from "@heroicons/vue/solid";
5    // define `post` props
6    defineProps(["post"]);
7    const {
8      public: { strapiURL },
9    } = useRuntimeConfig();
10    // helper function to get username from `post` attributes
11    const getUsername = (post) => post?.attributes?.user.data?.attributes?.username;
12    // helper to get and display date
13    const showDateTime = (post) => new Date(post?.attributes?.updatedAt).toDateString() + " | " + new Date(post?.attributes?.updatedAt).toLocaleTimeString();
14    </script>
15    <template>
16      <li class="post">
17        <header class="post-header">
18          <div class="author-cont">
19            <div class="avatar">
20              <!-- Get first letter in user name -->
21              <p>{{ getUsername(post)?.substr(0, 1) }}</p>
22            </div>
23            <p class="username">{{ getUsername(post) }}</p>
24          </div>
25          <!-- Post options go here -->
26        </header>
27        <ul class="photos">
28          <li v-for="photo in post?.attributes?.photo.data" :key="photo.id" class="photo">
29            <div class="img-cont">
30              <img :src="strapiURL + photo?.attributes?.url" :alt="post?.attributes?.caption" />
31            </div>
32          </li>
33        </ul>
34        <p class="caption">{{ post?.attributes?.caption }}</p>
35        <div class="info-cont text-xs text-gray-600">
36          <div class="time">{{ showDateTime(post) }}</div>
37        </div>
38        <div class="comment-cont">
39          <ChatIcon class="icon solid" />
40          <form class="comment-form">
41            <div class="form-control">
42              <textarea name="comment" id="comment" cols="30" rows="1" class="form-textarea comment-textarea" placeholder="Leave a comment"> </textarea>
43            </div>
44            <button class="cta submit-btn">
45              <PaperAirplaneIcon class="icon solid rotate-90" />
46            </button>
47          </form>
48        </div>
49      </li>
50    </template>
51    
52    <style scoped>
53    /* ... */
54    </style>

View code on GitHub

Here, we define the props for our component with the defineProps() method which accepts a props array or object. We also have a few helper functions which help with displaying some information like avatar and date. Next, let’s modify our home page to fetch the posts and render the component.

Fetch Posts with AsyncData

Back in our ./pages/index.vue page,

1    <!-- ./pages/index.vue -->
2    
3    <script setup>
4    import { RefreshIcon } from "@heroicons/vue/outline";
5    
6    const {
7      public: { graphqlURL, strapiURL },
8    } = useRuntimeConfig();
9    
10    const session = useSession();
11    const user = useUser();
12    
13    // page state
14    const isLoading = ref(false);
15    const posts = ref({});
16    const error = ref({});
17    
18    // function to get posts
19    const getPosts = async (page) => {
20    
21      // post query with page and page size variables
22      const postsQuery = {
23        query: `query($page: Int, $pageSize: Int) {
24      posts(pagination: {page: $page, pageSize:$pageSize}, sort: "updatedAt:desc") {
25        data {
26          id
27          attributes {
28            user {
29              data {
30                id
31                attributes {
32                  username
33                }
34              }
35            }
36            photo {
37              id
38              data {
39                attributes {
40                  url
41                }
42              }
43            }
44            caption
45            updatedAt
46          }
47        }
48        meta {
49          pagination {
50            total
51            pageSize
52            page
53          }
54        }
55      }
56    }
57    `,
58        variables: {
59          page: parseInt(page),
60          pageSize: 10,
61        },
62      };
63      try {
64        let { posts, errors } = await sendReq(graphqlURL, { body: JSON.stringify(postsQuery), headers: { "Content-Type": "application/json" } });
65        if (errors) throw Error(errors);
66        return posts;
67      } catch (error) {
68        console.log({ error });
69      }
70    };
71    
72    // Get current route page by destructuring useAsyncData context to get route > query > page
73    const { data } = await useAsyncData("posts", async ({ _route: { query } }) => {
74      let { page } = query;
75      return await getPosts(page);
76    });
77    </script>

View Code on GitHub

As we can see here in our <script> section, we have an async getPosts() function which takes page as a parameter. Within this function, we define the postsQuery with $page and $pageSize variables which determines the page and number of posts in a page we get from our query.

In order to determine the page, within the useAsyncData() function, we have access to the request context from the ctx parameter in the useAsyncData(``'``posts``'``, (ctx) => {}). By destructuring obtain the page from the route query.

Next, in our <template>

1    <!-- ./pages/index.vue -->
2    
3    <template>
4      <main class="site-main home-main">
5        <div class="wrapper">
6          <header>
7            <h1 class="text-4xl font-bold">Hey, {{ user?.username || "Stranga!" }}</h1>
8          </header>
9          <div class="content-wrapper">
10            <aside class="create-post-aside">
11              <div class="wrapper">
12                <header class="px-2 mb-2">
13                  <h3 class="font-medium">Create a new post</h3>
14                </header>
15                <!-- Editor goes here -->
16                <!-- Pagination goes here -->
17              </div>
18            </aside>
19            <section class="posts-section">
20              <ul class="posts">
21                <Post v-for="post in data?.data" :key="post.id" :post="post" />
22              </ul>
23            </section>
24          </div>
25        </div>
26      </main>
27    </template>
28    <style scoped>
29    /* ... */
30    </style>

With that, we should have our first post displayed like this:

Next, we’ll create our Editor component to upload pictures and create posts.

Add Pagination

Eventually, our posts will be more than just one and we’ll need a way to navigate through them, let’s quickly create a pagination component for that.

• Create a new file, ./components/Pagination.vue

1    <!-- ./components/Pagination.vue -->
2    
3    <script setup>
4    defineProps(["pagination"]);
5    // helper function to create pagination
6    const getPagination = ({ page, pageSize, total, pageCount }) => {
7      // Get previous page number with `1` as the lowest
8      let prev = Math.abs(page - 1) > 0 ? Math.abs(page - 1) : 1;
9      // Get next page with number of total pages as highest
10      let next = page + 1 < pageCount ? page + 1 : pageCount;
11      // console.log({ pages, prev, next });
12      return {
13        pageCount, page, pageSize, total, prev, next,};
14    };
15    </script>
16    <template>
17      <div class="pagination">
18        <ul class="list">
19          <li>
20            <a :href="`?page=` + getPagination(pagination).prev">
21              <button class="cta">Previous</button>
22            </a>
23          </li>
24          <li v-for="n in getPagination(pagination).pageCount" :key="n">
25            <a :href="`?page=${n}`">
26              <button class="cta">
27                {{ n }}
28              </button>
29            </a>
30          </li>
31          <li>
32            <a :href="`?page=` + getPagination(pagination).next">
33              <button class="cta">Next</button>
34            </a>
35          </li>
36        </ul>
37      </div>
38    </template>

In this component we get the pagination data as a prop which we defined in the defineProps() function. Then, we create a getPagination() helper function which calculates the next and previous page numbers. Let’s add it in our ./pages/index.vue file:

1    <!-- ./pages/index.vue -->
2    
3    <template>
4      <main class="site-main home-main">
5        <div class="wrapper">
6          <!-- ... -->
7          <div class="content-wrapper">
8            <aside class="create-post-aside">
9              <div class="wrapper">
10                <!-- ... -->
11                <!-- Editor goes here -->
12                <Pagination :pagination="data?.meta?.pagination" />
13              </div>
14            </aside>
15            <!-- ... -->
16          </div>
17        </div>
18      </main>
19    </template>

Next, we’ll work on the Editor component to create posts.

Step 5: Create Posts

In order to create posts, we will need to send authenticated requests with our mutation queries. To create a Post we will need to send two requests to:

• First, upload images and obtain the uploaded image IDs
• Then, create the post with the caption and array of uploaded image IDs

To do this:

• Create a new file ./components/Editor.vue.

1    <!-- ./components/Editor.vue -->
2    
3    <script setup>
4    // import icons
5    import { PlusCircleIcon } from "@heroicons/vue/solid";
6    
7    // Get graphqlURL from runtime config
8    const {
9      public: { graphqlURL },
10    } = useRuntimeConfig();
11    
12    // init useRouter
13    const router = useRouter();
14    
15    // Get `user` & `session` application state
16    const user = useUser();
17    const session = useSession().value;
18    
19    // data state
20    const isLoading = ref(false);
21    const data = ref(null);
22    const error = ref({});
23    
24    // component states
25    const imagesURL = ref([]);
26    const images = ref({});
27    const fileBtnText = ref("Choose Images");
28    const caption = ref("");
29    
30    // header object for fetch request
31    let headersList = {
32      Accept: "*/*",
33      // set authorization token
34      Authorization: `Bearer ${session.data.jwt}`,
35      "Content-Type": "application/json",
36    };
37    
38    // function to generate preview URLs for selected images before upload
39    const previewImg = (e) => {
40      // save files to `images` state
41      images.value = e.target.files;
42    
43      // create iterable array from `FileList`
44      let files = Array.from(images.value);
45    
46      // iterate over `files` array to create temporary URLs
47      // URLs will be used to preview selected images before upload
48      imagesURL.value = [];
49    
50      files.forEach((file, i) => {
51        let url = URL.createObjectURL(file);
52        imagesURL.value.push(url);
53      });
54    
55      // set upload file button content to [number of] files selected
56      let length = imagesURL.value.length;
57      fileBtnText.value = `${length} file${length != 1 ? "s" : ""} selected`;
58    };
59    
60    // function to upload files to Strapi media library and get the uploaded file `ids`
61    const uploadFiles = async () => {
62    
63      // mutation to upload multiple files
64      const uploadMultipleMutation = {
65        query: `
66          mutation($files: [Upload]!){
67            multipleUpload(files: $files){
68              data{
69                id
70              }
71            }
72          }
73        `,
74        variables: {
75          // dynamically generate array with null values to match the number of images selected
76          // files: [null, null, null]
77          files: imagesURL.value.map((x) => null),
78        },
79      };
80    
81      // image variables map
82      /*
83      {
84        "0": [
85            "variables.files.0"
86        ],
87        "1": [
88            "variables.files.1"
89        ],
90        "2": [
91            "variables.files.2"
92        ]
93      }
94      */
95      let map = {};
96    
97      // init `FormData()`
98      const formData = new FormData();
99    
100      // append `operations` to FormData(), which conatin the graphQL query
101      formData.append("operations", JSON.stringify(uploadMultipleMutation));
102    
103      // create map for variable files
104      for (let i = 0; i < images.value.length; i++) {
105        map[`${i}`] = [`variables.files.${i}`];
106      }
107    
108      // add mapp to `FormData()`
109      formData.append("map", JSON.stringify(map));
110    
111      // append images to formData
112      // with names corresponding to the keys in `map`
113      for (let i = 0; i < images.value.length; i++) {
114        const image = images.value[i];
115        formData.append(`${i}`, image);
116      }
117    
118      try {
119        // send request with `formdata` and authorization headers
120        let { multipleUpload, errors } = await sendReq(graphqlURL, { body: formData, headers: { Authorization: headersList.Authorization } });
121        if (errors) throw Error(errors);
122        console.log(multipleUpload);
123        return multipleUpload;
124      } catch (error) {
125        console.log(error);
126      }
127    };
128    
129    // function to create post
130    const createPost = async (e) => {
131      e.preventDefault();
132      isLoading.value = true;
133      // run if images and caption are not null
134      if (images && caption) {
135        // upload images and get the IDs
136        let uploads = await uploadFiles();
137    
138        // mutation query for creating posts
139        let createPostQuery = {
140          query: `
141          mutation($data: PostInput!){
142            createPost(data: $data){
143              data{
144                id
145                attributes{
146                  caption
147                  photo{
148                    data{
149                      id
150                      attributes{
151                        url
152                      }
153                    }
154                  }
155                  user{
156                    data{
157                      id
158                    }
159                  }
160                  updatedAt
161                }
162              }
163            }
164          }
165          `,
166          variables: {
167            data: {
168              caption: caption.value,
169              user: user.value.id,
170              // photo: [array of uploaded photo ids]
171              // e.g. photo: [21, 22, 23]
172              photo: uploads.map((file) => file.data.id),
173              publishedAt: new Date(),
174            },
175          },
176        };
177    
178        try {
179          // send request to create post
180          const { createPost, errors } = await sendReq(graphqlURL, { body: JSON.stringify(createPostQuery), headers: headersList });
181          if (errors) throw Error(errors);
182    
183          // save to state
184          data.value = createPost;
185    
186          // reload page
187          window.location.replace("/");
188        } catch (error) {
189          console.log(error);
190        } finally {
191          isLoading.value = false;
192        }
193      }
194    };
195    </script>
196    <template>
197      <form :disabled="isLoading || data" @submit="createPost" class="upload-form">
198        <div class="wrapper">
199          <div class="form-control file">
200            <div class="img-cont upload-img-cont">
201              <!-- Selected image previews -->
202              <ul v-if="imagesURL.length >= 1" class="images">
203                <li v-for="(src, i) in imagesURL" :key="i" class="image">
204                  <img :src="src" alt="Image" class="upload-img" />
205                </li>
206              </ul>
207            </div>
208            <label for="image-input" class="file-label" :class="{ 'mt-4': imagesURL.length > 0 }">
209              <span type="button" class="cta file-btn">
210                {{ fileBtnText }}
211              </span>
212              <input
213                :disabled="isLoading || data"
214                @change="previewImg"
215                id="image-input"
216                class="file-input"
217                type="file"
218                accept=".png, .jpg, .jpeg"
219                multiple
220                required
221              />
222            </label>
223          </div>
224          <div class="form-control">
225            <label for="caption">Caption</label>
226            <textarea
227              :disabled="isLoading || data"
228              v-model="caption"
229              name="caption"
230              id="caption"
231              cols="30"
232              rows="1"
233              class="form-textarea caption-textarea"
234              placeholder="Enter you caption"
235              required
236            >
237            </textarea>
238          </div>
239          <div class="action-cont">
240            <button :disabled="isLoading || data" type="submit" class="cta w-icon">
241              <PlusCircleIcon v-if="!data" class="icon solid" />
242              <span v-if="!data">{{ !isLoading ? "Create Post" : "Hang on..." }}</span>
243              <span v-else>Post created! 🚀</span>
244            </button>
245          </div>
246        </div>
247      </form>
248    </template>
249    <style scoped>
250    /* ... */
251    </style>