Best Content Management Systems for Vue.js Developers

Vue Developers Have More Official CMS Packages Than Most

Vue is well served by CMS vendors, and several ship packages of their own. Storyblok publishes @storyblok/vue, Prismic publishes @prismicio/vue, DatoCMS publishes vue-datocms, and Builder.io lists @builder.io/sdk-vue among its Gen 2 SDKs. Directus goes a step further: its whole admin app, the Data Studio, is written in Vue 3.

We ranked nine content management systems for Vue.js developers by how well they fit a Vue codebase, then read each one’s free plan and paid entry price on its own site. The list covers plain Vue apps built with Vite and Vue Router. Nuxt projects have their own module ecosystem, which our Nuxt CMS integration walkthrough covers step by step.

Vue CMS Packages and Prices Compared

Nine CMS Options Ranked for Vue Projects

1. Storyblok

Storyblok takes first place for plain Vue because its package covers fetching, component rendering and the Visual Editor in one plugin. The current guide was tested with @storyblok/vue 8.2.2, Vue 3.5.13 and vue-router 4.5.0. Setup is a single app.use() call in main.js, with the token read from a Vite environment variable:

// src/main.js
import { StoryblokVue, apiPlugin } from '@storyblok/vue';

app.use(StoryblokVue, {
  accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
  apiOptions: { region: 'eu' },
  use: [apiPlugin],
});

Pages then call const story = await useStoryblok('home', { version: 'draft' }) and render <StoryblokComponent :blok="story.content" />. The composable uses top-level await, so the component must sit inside <Suspense> in App.vue. Without that wrapper, Vue will not render the component at all.

The Starter plan is free for one seat (two at most), with 100,000 API requests and 100 GB of traffic a month. Growth is $99 a month, or $90.75 billed yearly, with five seats.

2. Directus

Directus earns second place for a reason other CMS platforms cannot match: its Data Studio admin app is written in Vue 3, and its shared packages include Vue composables and Pinia stores. When editors need a custom field, panel or page in the admin, a Vue developer writes it in the framework they already know.

On the front end, @directus/sdk works in any Vue app, and a small composable keeps the client in one place:

// src/composables/useDirectus.js
import { createDirectus, rest, readItems } from '@directus/sdk';

const directus = createDirectus(import.meta.env.VITE_DIRECTUS_URL).with(rest());

export function getPosts() {
  return directus.request(readItems('posts', { sort: ['-publish_date'] }));
}

Self-hosting is free under Directus’s Open Innovation Grant for organisations with under $5 million in yearly revenue and fewer than 50 employees. Directus Cloud Core costs $89 a month billed yearly, or $99 monthly, with a hard limit of three seats.

3. Prismic

Prismic ships @prismicio/vue, now at version 6, with components such as <SliceZone> that map each content section to one of your Vue components. Slices suit agencies that build a component library once and hand page assembly to the client.

Prismic’s Free plan has the highest API allowance in this list: 4 million calls and 100 GB of CDN bandwidth a month, with unlimited documents, for one user. Paid plans are per repository, billed yearly: Starter $10 a month for three users, Small $25 for seven, and Medium $150 for 25.

4. DatoCMS

DatoCMS publishes vue-datocms, whose useQuerySubscription composable keeps a GraphQL query live, so a page updates the moment an editor saves. It is a good fit for live blogs, event schedules and product pages where stale content costs money.

The free plan is meant for prototypes, with 300 records, 100k API calls and 10 GB of traffic a month and no overages. Professional starts at €149 a month billed yearly, or €199 monthly, with 10 collaborators and 100k records.

5. Builder.io

Builder.io lists @builder.io/vue for Gen 1 and @builder.io/sdk-vue for Gen 2, and the Vue package covers Nuxt too. You register Vue components, and marketers arrange them in a drag-and-drop editor. The Free plan allows one user with 60 credits a month, Pro is $24 per user a month, and Team is $40.

6. Nuxt Content With Nuxt Studio

Nuxt Content is the Vue world’s Git-based option, where content lives as Markdown in your repository, and Nuxt Studio, rebuilt as a free MIT-licensed module, adds a visual editor for people who do not use Git. It requires Nuxt, so it ranks here for Vue developers willing to adopt Nuxt for a content site.

Install it with npx nuxt module add nuxt-studio and point studio.repository at your GitHub or GitLab repo. Editors sign in through GitHub, GitLab, Google or a custom provider, so they never need a Git client.

7. Sanity

Sanity works in a plain Vue app through the framework-agnostic @sanity/client and GROQ queries. Its editing studio is built in React, so Vue teams customise the front end in Vue and the studio in React. Nuxt users get the @nuxtjs/sanity module with a useSanityQuery composable.

The Free plan is unusually wide on seats, allowing up to 20 with Administrator and Viewer roles. Growth is $15 per seat a month and adds Editor and Contributor roles.

8. Strapi

Strapi is MIT-licensed and free to self-host, and Vue apps call its REST or GraphQL API with fetch or any HTTP client, and Nuxt users can add the @nuxtjs/strapi module. Strapi Cloud starts at $35 a month per project with 100,000 API requests, and Pro is $90 with 1 million.

9. Contentful

Contentful suits Vue teams inside larger companies where the same content feeds apps, email and several sites. Its Vue tutorial calls the Content Delivery REST API directly with axios. The Free plan allows 10 users, two locales and 100K API calls a month, and Lite costs $300 a month.

What a Developer Plus One Client Editor Pays

Freelancers often build a Vue site for a client who edits it alone. We priced that two-person setup for a year on the cheapest plan that fits.

The free rows come with limits worth reading before you promise a client “free forever”. Contentful and DatoCMS free plans stop at their caps, and Sanity Free makes every editor an admin. Builder.io’s free credits run to 60 a month with a daily cap of 15.

Price the build itself separately from the CMS plan. Our freelance hourly rate calculator turns your target income into an hourly rate, and the invoice generator handles the bill.

Rendering CMS Rich Text Safely in Vue

Most CMS platforms return rich text as structured JSON or as an HTML string, and the second form tempts Vue developers to drop it into v-html. Vue does not sanitise v-html content, so any script or event handler hidden in a CMS field runs on your page, which matters when many people can edit or when content is imported from outside sources.

The safer route is the vendor’s own rich text renderer where one exists, since it turns JSON nodes into Vue elements and never treats text as markup. Where you must render HTML strings, pass them through a sanitiser such as DOMPurify first, and keep the allowed tags to what your design uses.

Content modelling helps here too, because a field for a pull quote, a call-to-action button or an embedded video is safer and easier to style as its own component block than as raw HTML pasted into a body field. Storyblok blocks, Prismic slices and DatoCMS modular content are all built around that idea, and each maps neatly onto one Vue component per block.

Moving a Vue Site From One CMS to Another

Agencies often inherit a Vue site on a CMS the new client no longer wants to pay for, and the move goes faster when you treat it as a data job first and a front-end job second. Start by exporting every entry and asset from the old system, then map each old content type to a new one on paper before you create anything in the new CMS.

Keep the props of your Vue components stable through the move, so that a HeroBlock component still receives the same title, image and ctaLink props whatever system supplies them. A thin mapping function between the CMS response and your components, kept in one file, means the components themselves do not change at all.

Plan URLs as carefully as content. If the slug format changes between systems, write 301 redirects from every old path to its new one before launch, and check them against the sitemap from the old site, since broken links lose search traffic that took years to build.

Plain Vue or Nuxt for a Content Site

A Vite and Vue Router app renders in the browser, which is fine for a dashboard or an app behind a login. For public pages that should rank in search and show rich link previews, server-rendered or prerendered HTML is safer, and that is what Nuxt adds.

The CMS choice barely changes, because Storyblok, Prismic, Sanity and Strapi all have Nuxt modules, so content models and components move across with small changes to the fetching code. If you are unsure, start the content site in Nuxt and keep plain Vue for the app.

Choosing Among Vue CMS Options

• Marketers will build pages themselves: Storyblok, for its Vue plugin and Visual Editor, or Builder.io for drag-and-drop layouts.
• You need custom admin screens: Directus, because its admin app and shared composables are Vue 3 code.
• The site has heavy traffic on a small budget: Prismic, with 4 million free API calls a month.
• Content must update live on the page: DatoCMS with useQuerySubscription, which pushes each saved change to open pages.
• Developers write most content: Nuxt Content with Nuxt Studio, so posts live in Git next to the code.
• Data must stay on your servers: Strapi or Directus, self-hosted on infrastructure you control.

Assets slow Vue sites more often than API calls do, so resize images before upload with our bulk image resizer. For a wider view of frameworks, our guide on how to choose a CMS for a React website has a cost chart at 3 and 10 editors that applies to Vue teams too.

Vue CMS Questions Developers Ask

Which Headless CMS Has the Best Vue Support?

Storyblok, Prismic and DatoCMS publish dedicated Vue packages, and Directus’s admin app is itself built in Vue 3. Storyblok’s plugin covers fetching, rendering and visual editing in one install, which is why it tops our list.

Is There a Free CMS for Vue.js?

Yes. Strapi and Nuxt Content with Nuxt Studio are free and open source, and Directus is free to self-host for organisations under $5 million in revenue. Sanity, Contentful, Prismic and Storyblok also have free hosted plans with usage caps.

Why Does My Storyblok Vue Page Render Blank?

useStoryblok uses top-level await, so the component must be wrapped in <Suspense>. Also check that the region option matches where your space is hosted.

Can I Use WordPress as a Headless CMS With Vue?

Yes, through the WordPress REST API, although the packages in this list add Vue components, previews and typed queries that a plain REST setup lacks.

Vue and CMS Pages Behind This Ranking

• Storyblok Vue guide
• Storyblok pricing
• Directus codebase guide
• Directus SDK data fetching guide
• Directus pricing and self-hosting terms
• Prismic Nuxt and Vue packages
• Prismic plans and pricing
• DatoCMS real-time updates for Vue
• DatoCMS pricing
• Builder.io SDK comparison
• Builder.io pricing
• Nuxt Studio open-source announcement
• Sanity pricing
• Sanity Nuxt module
• Strapi self-hosting and license
• Strapi Cloud pricing
• Nuxt Strapi module
• Contentful Vue tutorial
• Contentful pricing