Fetching Drupal data in Vue.js applicationsfor Drupal 8 , 9 , 10 , and 11

Welcome to another lesson in our Headless Drupal series. Now that you've learned how to connect React with Drupal's backend using JSON:API or GraphQL, let's explore fetching Drupal data in Vue.js applications. Vue.js, like React, is a powerful JavaScript framework for building dynamic user interfaces.

Setting Up Vue.js to Fetch Data

To start fetching data from Drupal using Vue.js, you first need to create your Vue.js application. If you haven’t set up Vue CLI on your system yet, you will need to do so.

Step 1: Set up a Vue.js Application

Here’s how to get started with a new Vue.js application using Vue CLI:

npm install -g @vue/cli
vue create my-drupal-vue-app

Navigate into your new project directory:

cd my-drupal-vue-app

Step 2: Fetch Data Using JSON:API

Let's proceed by fetching data from a JSON:API endpoint. You can use either the native fetch API or libraries like Axios. For consistency, we'll use Axios here:

npm install axios

Once Axios is installed, open your src/components directory and create a new component, say ArticleList.vue:

<template>
  <div>
    <h2>Articles</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.attributes.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      articles: []
    };
  },
  created() {
    axios
      .get('https://example-drupal-site.com/jsonapi/node/article')
      .then(response => {
        this.articles = response.data.data;
      })
      .catch(error => {
        console.error('Error fetching articles:', error);
      });
  }
};
</script>

In this component, data is fetched when the component is created using Axios, and the articles are then rendered within the template.

Fetching Data Using GraphQL

To use GraphQL with Vue.js, you'll want to set up the same GraphQL endpoint in Drupal as we discussed in the previous lesson. Vue.js commonly uses the Apollo Client to interact with GraphQL APIs.

Step 1: Setting Up Apollo Client

First, install Apollo Client and its Vue integration:

npm install @apollo/client vue-apollo graphql

Step 2: Configuring Apollo Client

Once installed, configure the Apollo Client in your Vue.js application by setting up a vue-apollo.js file for global usage:

// src/vue-apollo.js
import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import VueApollo from 'vue-apollo';

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  uri: 'https://example-drupal-site.com/graphql',
  cache
});

export const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

Next, integrate the Apollo Client with your main Vue.js instance in main.js:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { apolloProvider } from './vue-apollo';

createApp(App).use(apolloProvider).mount('#app');

Step 3: Querying Data with GraphQL

Create a component to query data and display it:

<template>
  <div>
    <h2>Articles</h2>
    <ul>
      <li v-for="article in articles" :key="article.nid">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';

export default {
  setup() {
    const { result } = useQuery(gql`
      query GetArticles {
        nodeQuery {
          entities {
            ... on NodeArticle {
              nid
              title
            }
          }
        }
      }
    `);

    return {
      articles: result
    };
  }
};
</script>

This example demonstrates how to integrate GraphQL queries within a Vue component using Apollo's composition API support.

Conclusion

In this lesson, you learned how to fetch data from Drupal backend systems using both JSON:API and GraphQL within Vue.js applications. With these techniques, you can build rich, dynamic interfaces that fully utilize the content served by your Drupal backend. In the next lesson, we will explore using Next.js for server-side rendering with Drupal, adding even greater capabilities to your headless setup. Stay tuned!