These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

Why use Nuxt?

Nuxt grows and adapts with your needs while providing an exceptional developer experience. Build anything from simple landing pages to complex web applications that scale for teams of hundreds of developers. Nuxt is designed to be approachable for developers of all skill levels:

• Zero configuration: Start coding with Vue or Typescript immediately — Nuxt handles all the setup for you.
• Rendering Modes: Server-side rendering, client-side rendering, static-site generation, you decide, up to the page level.
• Routing & Layouts: Use our file-based routing system to build complex url-based views while reusing components for performance.
• Data Fetching: Make your Vue component async and await your data. Nuxt provides powerful composables for universal data fetching.

The list goes on and on…

Nuxt was born from developers' need to boost productivity and platform performance. What began as a Vue-based solution for automating tasks and server-side rendering is now trusted by startups and enterprises all around the world.

Visit the Nuxt.js documentation for more details.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure. 2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration. 3. 100% TypeScript Support: Enjoy type safety & easy maintainability 4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 6. Editor interface: The editor allows you to pull in dynamic blocks of content. 7. Authentication: Secure and authorize access to your API with JWT or providers. 8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 9. i18n: Manage content in multiple languages. Easily query the different locales through the API. 10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

• Access Live Demo!

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

🚀 Welcome to Strapi! Ready to bring your project to life?

Create a free account and get:
30 days of access to the Growth plan, which includes:
✨ Strapi AI: content-type builder, media library and translations
✅ Live Preview
✅ Single Sign-On (SSO) login
✅ Content History
✅ Releases

? Please log in or sign up.
  Login/Sign up
❯ Skip

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Nice, now that we have our Strapi 5 server setup, we can start to setup our Nuxt.js application.

Getting Started with Nuxt

Install Nuxt.js

Learn everything about how to install Nuxt from the online documentation.

# using npm
npm create nuxt <project-name>

# using yarn
yarn create nuxt <project-name>

# using pnpm
pnpm create nuxt <project-name>

# using bun
bun create nuxt <project-name>

# using deno
deno -A npm:create-nuxt@latest <project-name>

For this integration guide, the name of our frontend will be nuxt-frontend.

When asked:

❯ Would you like to install any of the official modules?

Please select @nuxt/eslint for linting our code and @nuxt/image for image display.

Start Nuxt.js Development Server

Start your Nuxt.js development server with the command below.

Make sure you are in your Nuxt.js project folder:

cd nuxt-frontend 
npm run dev -- -o

A browser window should open at http://localhost:3000.

Adding Tailwind CSS to our Nuxt project

Notice that we are using Tailwind CSS in our example.

You can either go with the Tailwind CSS module for Nuxt, or follow Tailwind CSS official Nuxt installation instructions.

Step 1: Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Step 2: Import Tailwind CSS

Inside your Nuxt.js application folder, create an ./assets/css/main.css file and add an @import that imports Tailwind CSS.

// Path: nuxt-frontend/assets/css/main.css

@import "tailwindcss";

Step 3: Configure Vite Plugin and CSS File

Add the @tailwindcss/vite plugin to your Nuxt configuration as a Vite plugin inside the nuxt-frontend/nuxt.config.ts file.

Also add the newly-created nuxt-frontend/assets/css/main.css file to the css array in your nuxt.config.ts file.

// Path: nuxt-frontend/nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: "2025-05-15",
  devtools: { enabled: true },
  modules: ["@nuxt/image", "@nuxt/eslint"],
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
});

Building out our Nuxt project

Nuxt uses a file based routing system. You can read more about it here.
For this example, we will be using the app.vue file directly.

Let’s update it with the following code:

// Path: nuxt-frontend/app.vue

<script setup lang="ts">
// Create Article type
type Article = {
  id: number;
  title: string;
  content: string;
  publishedAt: string;
  cover: {
    url: string;
  };
};

// Strapi API URL
const STRAPI_URL = "http://localhost:1337";

// Create a function to fetch data from the Strapi API
const { data: articles } = useFetch<{ data: Article[] }>(
  `${STRAPI_URL}/api/articles?populate=*`,
);

// Format date
const formatDate = (date: Date) => {
  const options: any = { year: "numeric", month: "2-digit", day: "2-digit" };
  return new Date(date).toLocaleDateString("en-US", options);
};
</script>

<template>
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-5xl font-extrabold mb-10 text-center">
      Nuxt.js and Strapi Integration
    </h1>

    <section aria-labelledby="articles-title" class="space-y-8">
      <h2 id="articles-title" class="text-3xl font-bold">Latest Articles</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <article
          v-for="article in articles?.data"
          :key="article.id"
          class="bg-white dark:bg-gray-900 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-200 overflow-hidden flex flex-col"
        >
          <NuxtImg
            :src="`${STRAPI_URL}${article.cover.url}`"
            :alt="`Cover image for ${article.title}`"
            class="w-full h-52 object-cover"
          />

          <div class="p-6 flex flex-col gap-3">
            <h3
              class="text-2xl font-semibold text-gray-900 dark:text-white leading-snug"
            >
              {{ article.title }}
            </h3>

            <p class="text-gray-600 dark:text-gray-300 text-sm italic">
              {{ formatDate(article.publishedAt) }}
            </p>
            <p
              class="text-gray-700 dark:text-gray-400 text-base leading-relaxed line-clamp-4"
            >
              {{ article.content }}
            </p>
          </div>
        </article>
      </div>
    </section>
  </main>
</template>

In the code above, you did the following:

• Created the Article type.
• Fetched articles data using useFetch() composable function.
• The formatDate converts ISO strings from Strapi into a readable date format.
• Each article is rendered in a styled card layout with clamped content preview.

🖐️ NOTE: Alternatively, you can leverage the built-in Strapi Client or the Strapi module for Nuxt.

This is what the home page of the Nuxt.js app should look like:

GitHub Repo

You can find the complete code for this project in this Github repo.

Next steps

From there, you’re free to implement anything you need!

If you want to use the Rich Text (Blocks) field, take a look at vue-strapi-blocks-renderer. Using Markdown instead? Use the Nuxt MDC module.

Also, you can learn more about making more complex API calls to your Strapi instance from the official REST API documentation.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

• Access Live Demo!

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details about the integration above, visit the following documentation:

• Strapi documentation
• Nuxt.js Documentation