Frontend Frameworks

Static Site Generator

Manage your Nuxt.js application content with a powerful headless CMS. 
Open Source, customizable, and self-hosted, Strapi provides an intuitive admin panel as well as an API consumable from any http client.

## The easiest way to manage your content

Effortlessly create content structures that flex to your needs. No matter which data structure is the best for your business, you can easily define models and add relations to create rich layout experiences.
Seamlessly write, edit and manage any content types.
Easily build apps and digital experiences without the distraction of CMS complexities.
Consume the API from Nuxt.js using REST or GraphQL.

## Nuxt.js has a lot of benefits

Build your next Vue.js application with confidence using [NuxtJS](https://nuxtjs.org/). An open source framework making web development simple and powerful.

1. **Modular**: Nuxt.js is based on a powerful modular architecture. You can choose from more than 50 modules to make your development faster and easier. You don't have to reinvent the wheel to get PWA benefits, add Google Analytics to your page or generate a sitemap.
2. **Performant**: With Nuxt.js, your application will be optimized out of the box. They dot their best to build performant applications by utilizing Vue.js and Node.js best practices. To squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app.
3. **Enjoyable**: The main focus is the Developer Experience. They continuously improve the framework so you love it too! 💚
Expect appealing solutions, descriptive error messages, powerful defaults and detailed documentation. If questions or problems come up, their helpful community will help you out.

Many http clients exists in Javascript in order to communicate with a Strapi API: [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), [axios](https://github.com/axios/axios) or [request](https://github.com/request/request).

But you can also use the wonderful [@nuxt/strapi module](https://strapi.nuxtjs.org/) for a first class integration with Strapi.

## Strapi, the best fit with Nuxt.js

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. **Customizable API**: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
3. **Integrations**: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
4. **Editor interface**: The editor allows you to pull in dynamic blocks of content.
5. **Authentication**: Secure and authorize access to your API with JWT or providers.
6. **RBAC**: Help maximize operational efficiency, reduce dev team support work, safeguard against unauthorized access or configuration modifications.
7. **i18n**: Manage content in multiple languages. Easily query the different locales through the API.



Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js.

nuxt-code-snippet.svg

nuxt-2021.svg

https://staging.strapi.io/uploads/Group_547_ce69b9e045.svg

With Strapi, you have no need for a server-side language and reduce your attack surface area.

Higher Security

features-icon-code

Your dev team is not tied to a monolithic codebase and can choose their favorite stack to build a microservices architecture. 

Best developer experience

icon-resize

With Strapi and Nuxt.js, you have unlimited usage and can scale as you grow. 

Infinite scalability

Why choose Strapi with Nuxt.js? 

Keep in touch with the latest Strapi and Nuxt.js updates

Bootstrap a simple e-commerce website using Strapi, Nuxt.js and Snipcart. In this starter, you'll be able to use all the latest features available in Strapi. 

Strapi, Nuxt.js & Snipcart e-commerce starter upd.png

Strapi Starter Nuxt.js e-commerce

This is a step-by-step guide on how to implement Strapi-based authentication in a Nuxt.js app.

Strapi Nuxy Auth upd.png

Strapi Authentication in Nuxt.js

Here's how to build an Ecommerce store with Next.js and Strapi. An easy step by step tutorial that also includes an email and payment integration.

Strapi Nuxy Auth (1).png

How to build an E-commerce Store with Nuxt.js and Strapi

If you follow the content of our blog you are aware that Remi and I have embarked on the creation of starters. I created a [blog starter using Gatsby](https://strapi.io/blog/strapi-starter-gatsby-blog-v2), a [Nuxt.js blog starter](https://strapi.io/blog/strapi-starter-nuxt-blog) and Remi a [corporate site starter using Next.js](https://strapi.io/blog/strapi-starter-next-corporate-site) as well as a [portfolio starter using Gridsome](https://strapi.io/blog/strapi-starter-gridsome-portfolio). Well today I am glad to announce that an e-commerce starter using [Nuxt.js](https://strapi.io/integrations/nuxtjs-cms) and Snipcart has been published!

![Gif excited](https://media.giphy.com/media/UlqLDtI8Qc0j6/giphy.gif)

This starter is a simple e-commerce application on which you can buy dev stickers with an integrated shopping cart made by [Snipcart](https://snipcart.com/). Super easy to integrate, Snipcart offers you the possibility to sell products, downloads, or subscriptions online.

### Features in Strapi

- 1 Component
- 2 Collection types: Product, Category
- 27 Created products
- 6 Created categories
- Permissions set to `true` for product and category
- Responsive design using Tailwind css
- Slug system
- Publication system (draft & published)
- Role based access controls

### Features in Nuxt.js

- [@nuxt/strapi](https://strapi.nuxtjs.org/) module

### Payment service

This starter is using [Snipcart](https://snipcart.com/) which allows you setup a shopping cart on any website.
They wrote a [tutorial](https://snipcart.com/blog/strapi-nuxt-ecommerce-tutorial) teaching you how to create this website but selling cupcakes!

Payment will not work on localhost, we are redirecting you to this [tutorial](https://snipcart.com/blog/develop-a-snipcart-powered-website-locally-using-ngrok) if you want to test payment locally.

### Getting started

Clone the [repository](https://github.com/strapi/strapi-starter-nuxt-e-commerce)

```
git clone https://github.com/strapi/strapi-starter-nuxt-e-commerce.git
cd strapi-starter-nuxt-e-commerce
```

**Backend**

Install dependencies and run your server

```bash
# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop
```

**Frontend**

```bash
# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop
```

Nuxt.js server is running here => [http://localhost:3000](http://localhost:3000)

Thank you for taking the time to read this blog post, I'll see you soon with a new starter (with [Gridsome](https://strapi.io/integrations/gridsome-cms) again) ;)
Enjoy this starter!

> **Please note:** Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us [by reporting it here](https://github.com/strapi/community-content/issues/new/choose).

---

Get started with Strapi by creating a project using a [starter](https://strapi.io/starters) or trying our [live demo](https://strapi.io/demo). Also, consult our [forum](https://forum.strapi.io) if you have any questions. We will be there to help you.
<p align="center">
<a href="https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project">
<img src="https://assets.strapi.io/uploads/Get_Started_e4e026ce55.svg#small" />
</a>
</p>
See you soon!


The article has been updated with Strapi v4.

Find more Nuxt.js resources on our blog

triangle-light-blue

Jamstack E-commerce with Nuxt, Strapi and Snipcart

medium_https://staging.strapi.io/uploads/Group_12_2_1_b00f6239f8.png

small_https://staging.strapi.io/uploads/Group_12_2_1_b00f6239f8.png

thumbnail_https://staging.strapi.io/uploads/Group_12_2_1_b00f6239f8.png

https://staging.strapi.io/uploads/Group_12_2_1_b00f6239f8.png

From zero to Strapi-powered app in seconds. Use the docs to add dynamic content to your Nuxt.js apps.


Get Started with the Nuxt.js docs

icon-blue-editorial-write

Get started with a simple blog application using Nuxt.js, Apollo and Strapi. 

[**Use this starter**](https://strapi.io/starters/strapi-starter-nuxt-js-blog)


Nuxt.js Blog Starter

icon-blue-ecommerce

Bootstrap a simple e-commerce application using Nuxt.js, Snipcart and Strapi.

[**Use this starter**](https://strapi.io/starters/strapi-starter-nuxt-js-e-commerce)