PHPackages                             epik-dev/vue-items-list - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [API Development](/categories/api)
4. /
5. epik-dev/vue-items-list

ActiveDrupal-module[API Development](/categories/api)

epik-dev/vue-items-list
=======================

Vue items list drupal module (test). Module adds a 'Vue items list' block that fetches data from an API endpoint and renders it as a list of items. It uses a Vue 3 / Typescript component for rendering.

1.1(1y ago)014VuePHP >=8.0

Since Aug 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/e-Pik-Dev/Vue-items-list)[ Packagist](https://packagist.org/packages/epik-dev/vue-items-list)[ RSS](/packages/epik-dev-vue-items-list/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

Vue items list
==============

[](#vue-items-list)

This is a test Drupal module that adds a `Vue items list` block which uses compiled Vue 3 SFC / Typescript component to render its content. The Vue component fetches and lists data from a predefined API endpoint (configurable).

Installation
------------

[](#installation)

1. Use composer to install the module

    ```
    composer require epik-dev/vue-items-list
    ```
2. Once installed, to enable the module, go to the `Extend` page (`Manage->Extend`, `{drupal_site}/admin/modules`), find `Vue items list (Test Module)`, tick a checkbox in front of it and click `Install` button
3. Place the block via at Block layout page:

    1. Log in as an administrator on your Drupal site
    2. Navigate to `Block layout` page (`Manage->Structure->Block layout`, `{drupal_site}/admin/structure/block`)
    3. Select a block region where you want to place the block, e.g. Header (block region names are specific to themes) and click `Place block` button
    4. In the block list that opens, find the `Vue items list` block or type it in the filter textfield
    5. Once found, click `Place block` button next to it, configure options if necessary

Configuration options
---------------------

[](#configuration-options)

When placing or configuring a block, two configuration options are available:

- **API endpoint**: The URL of the API endpoint to retrieve data
- **Maximum items to show**: Maximum number of data items displayed in the block

Technical info
--------------

[](#technical-info)

Vue component is build as native ES module employing Vite, which compiles Vue SFC component into separate index.js and index.css files, which are loaded by the module to render its content.

Component source code folder is `/vite/src`Component build code folder `/component`

However, for this build to work, this module loads a separate Vue esm version from CDN, its url is specified under `vue.cdn.esm` key in `vue_items_list.libraries.yml`.

Modern Vue development best practices include using Vue SFCs (Single File Components), TypeScript, and Vite tooling.

Vue SFCs are files that can contain a block of code for scripts, templates, and styles that combine and encapsulate all aspects of a component. To use Typescript for Vue, a transpilation step is required, converting Typescript -> JS. Vite handles all of the above, moreover, it accelerates development with HMR and provides rich build options.

Requirements
------------

[](#requirements)

- Drupal 9.x, 10.x.
- PHP >= 8.0

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

2

Last Release

634d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/88385d7d8d3652a22c6f1f15e29a13b31efba032d90d8aa2a443c2f696f33389?d=identicon)[ePikDev](/maintainers/ePikDev)

---

Top Contributors

[![e-Pik-Dev](https://avatars.githubusercontent.com/u/163315057?v=4)](https://github.com/e-Pik-Dev "e-Pik-Dev (17 commits)")

---

Tags

drupaltypescriptvue 3Vue items listePikDev

### Embed Badge

![Health badge](/badges/epik-dev-vue-items-list/health.svg)

```
[![Health](https://phpackages.com/badges/epik-dev-vue-items-list/health.svg)](https://phpackages.com/packages/epik-dev-vue-items-list)
```

###  Alternatives

[hussainweb/drupal-api-client

Convenient wrapper on Guzzle to access Drupal.org API

148.7k](/packages/hussainweb-drupal-api-client)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)