Streamlining Drupal Front-End Development with Inertia.js: A Step-by-Step Guide

Introduction

In this article, I’ll guide you through the process of integrating Inertia.js with Drupal, showing how you can create dynamic, single-page applications (SPAs) without sacrificing the flexibility of your back-end. We’ll cover the following key steps: setting up a Drupal project from scratch, integrating Inertia.js, creating dynamic content views, and rendering data using Vue.js.

If you’re familiar with front-end frameworks like Vue.js and want to pair them with a Drupal back-end, this guide is for you. We’ll build a small demo application to demonstrate this integration and give you practical insights into using Inertia.js for seamless front-end development

Table of Contents

1. Prerequisites
2. Setting Up a New Drupal Project
3. Installing the Inertia.js Drupal Module
4. Creating a Dynamic View and Menu Link
5. Rendering Data in Vue.js Components
6. Enhancing UI with TailwindCSS
7. Conclusion

1. Prerequisites

Before starting, make sure you have:

• A working knowledge of Drupal (familiarity with custom modules and content types).
• Basic understanding of Vue.js and Inertia.js.
• Installed development tools like Composer, npm, Drush, and a local environment to run Drupal.

2. Setting Up a New Drupal Project

We begin by setting up a fresh Drupal project. In the terminal, run:

composer create-project drupal/recommended-project drupal-inertiajs

Installing Drupal with Minimal Profile

To keep things simple and focused on the integration process, I will install Drupal with the Minimal profile. This is a lean version of Drupal without unnecessary features that can clutter the interface. Run the installation process from the URL where your local server is hosting the project, select Minimal Profile, and proceed through the installation steps.

Note: I am using SQLite as the database to keep the setup lightweight, but you can opt for MySQL or PostgreSQL if preferred.

Setting Up the Admin Interface

Once Drupal is installed, I recommend enabling the Claro Theme for a modern admin interface and the Toolbar module for easy navigation:

drush theme:enable claro
drush pm:enable toolbar

3. Installing the Inertia.js Drupal Module

Now that we have Drupal set up, let’s install the Inertia.js integration module for Drupal, which I’ve been working on.

1. Search for the module on Drupal.org under the author’s name, Arif Khan.
2. Follow the sandbox module instructions for installing it (since it’s still in sandbox mode).

You’ll find the module’s URL in the Version Control section. Use the following Composer command to install it:

composer require drupal/inertia_integration:dev-main

If you encounter version issues, ensure to specify the correct version with the dev-main flag. After the module is installed, go to the admin interface to enable it.

Additionally, use Drush to set up a frontend app:

drush inertia_fi

When prompted, set the app name (I’m using frontend for this tutorial).

4. Creating a Dynamic View and Menu Link

Let’s now create a dynamic content listing using Drupal Views. We’ll be building an “Articles” page.

Step 1: Create a Content Type

From the admin interface, navigate to Structure > Content types > Add Content Type. Create a content type named Article with a title field and optional fields for body content.

Step 2: Enable Views Module

Next, enable the Views and Views UI modules:

drush pm:enable views views_ui

Step 3: Create a View for Articles

Now, go to Structure > Views > Add View. Create a view to display all articles with the URL path /articles. Change the view format to Fields and add the Title field to the view. Save the view.

Step 4: Creating a Menu Link for the View

With our view set up, we can now add a menu link for it. Go to Structure > Menus and add a link with the path /articles. In the form, select a component from the Inertia app to handle this view. Let’s create a Vue.js component for this.

5. Rendering Data in Vue.js Components

Step 1: Create a Vue.js Component

Navigate to your frontend app directory and create a new directory called Pages. Inside this, create a Vue.js component called Articles.vue. This component will be used to display the articles.

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

<script>
export default {
  props: {
    page_title: String,
    articles: Array
  }
}
</script>

Step 2: Build and Test the App

Run the following command to build the frontend app:

npm run build

Now, go back to your Drupal site and refresh the page. You should see the list of articles being rendered through Vue.js.

6. Enhancing UI with TailwindCSS

To improve the visual appearance of the articles list, we can use TailwindCSS for styling. Simply add some utility classes to the component:

<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold">{{ page_title }}</h1>
    <ul class="list-disc pl-5">
      <li v-for="article in articles" :key="article.id" class="py-2">{{ article.title }}</li>
    </ul>
  </div>
</template>

After applying the styles, refresh the page to see the updated look.

7. Conclusion

With this setup, you’ve successfully integrated Inertia.js with Drupal and created a dynamic, Vue.js-powered front-end. You can now build and customize pages quickly using Inertia.js while maintaining the robustness of Drupal’s back-end.

In future articles, we’ll explore more advanced use cases, such as handling forms, API integration, and improving the developer experience further.

Thanks for reading! If you found this tutorial helpful, feel free to check out my YouTube video where I walk through the entire process.