Vue

What is VueAnchor

Vue is a progressive framework for building user interfaces. It was designed to be incrementally adoptable.

The core library is focused on the view layer only (browser side), and is straightforward enough to pick up and integrate with other libraries or existing projects.

Benefits of VueAnchor

Vue is also well suited for powering sophisticated Single-Page Applications (SPAs) when used in combination with modern tooling and supporting libraries.

Why use a Headless CMS for VueAnchor

Using a GraphQL CMS for Vue is a great choice for any single page application or website you're building because the single endpoint and intuitive query syntax returns multiple data points. Working with GraphCMS is quick and easy with your favorite Vue GraphQL client.

GraphQL and VueAnchor

Like with many front-end frameworks GraphQL’s querying via API makes it flexible for Vue to query whatever data it needs.

For a Vue project, the choice of GraphQL client depends on how the components are written.

With that in mind, a client library is not mandatory for consuming a GraphQL API. If all that is needed is to display some data in HTML, the built-in fetch will work just as well.

Working with GraphCMS and VueAnchor

This example demonstrates how to query from GraphCMS with Vue.js.

• Demo

How to Use

Download Manually

npx degit graphcms/graphcms-examples/with-vuejs with-vuejs

Install & Run:

cd with-vuejs
npm install
npm run dev

Run on Codesandbox

This video covers the above example of adding GraphQL support to your Vue application. It uses graphql-request, allowing you to query your content using GraphCMS's GraphQL Content APIs.