PHPackages                             justdev/starter\_frontend\_twig - 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. [Templating & Views](/categories/templating)
4. /
5. justdev/starter\_frontend\_twig

ActiveProject[Templating & Views](/categories/templating)

justdev/starter\_frontend\_twig
===============================

Vite front-end twig boilerplate

3.3.1(1mo ago)027MITJavaScriptPHP >=7.3

Since Sep 29Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/kirilldorozhynskyi/starter_frontend_twig)[ Packagist](https://packagist.org/packages/justdev/starter_frontend_twig)[ Docs](https://github.com/kirilldorozhynskyi/starter_frontend_twig)[ RSS](/packages/justdev-starter-frontend-twig/feed)WikiDiscussions master Synced yesterday

READMEChangelog (4)Dependencies (4)Versions (26)Used By (0)

starter\_frontend\_twig
=======================

[](#starter_frontend_twig)

Starter template for static frontends built with Vite, Twig, Vue 3, and Tailwind CSS 4. It combines file-based pages, reusable Twig components, a small Vue app layer, image helpers, SVG spritemap generation, and a simple WordPress handoff for production themes.

Stack
-----

[](#stack)

- Vite 8
- Vituum + Twig
- Vue 3 + TypeScript
- Tailwind CSS 4
- `vanilla-lazyload`
- `vue-i18n`
- `@spiriit/vite-plugin-svg-spritemap`
- `vite-plugin-imagemin`

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

[](#requirements)

- Node.js LTS, preferably Node 20+
- npm
- Optional: PHP and Composer if you want to bootstrap a project via `composer create-project`

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

[](#installation)

### Use this repository directly

[](#use-this-repository-directly)

```
npm install
```

### Create a new project from Composer

[](#create-a-new-project-from-composer)

```
composer create-project justdev/starter_frontend_twig your-project-name
cd your-project-name
```

The Composer installer will:

- remove template-only Composer files
- rename the workspace file
- initialize a new Git repository
- run `npm install`

Available scripts
-----------------

[](#available-scripts)

```
npm run dev
npm run build
npm run preview
npm run webp
npm run i18n:add
npm run i18n:remove
```

- `npm run dev`: start the Vite development server
- `npm run build`: create a production build in `dist/`
- `npm run preview`: preview the production build locally
- `npm run webp`: convert `.png` and `.jpg` files inside `src/public/assets/images/` to `.webp`
- `npm run i18n:add`: add missing translation keys found in Vue files
- `npm run i18n:remove`: remove unused translation keys

Dokploy deployment
------------------

[](#dokploy-deployment)

The project is prepared for Dokploy as a static nginx container.

### Recommended: Application with Dockerfile

[](#recommended-application-with-dockerfile)

1. Create a new Application in Dokploy from this Git repository.
2. Set Build Type to `Dockerfile`.
3. Use `Dockerfile` as Dockerfile Path and `.` as Docker Context Path.
4. Add a domain in the Dokploy Domains tab and use port `80`.
5. Deploy.

The Dockerfile builds the Vite/Twig site and serves `dist/` from nginx. Extensionless static routes such as `/gdpr` are mapped to `gdpr.html`.

### Alternative: Docker Compose

[](#alternative-docker-compose)

Create a Docker Compose application in Dokploy and use the repository `docker-compose.yml`. Configure the domain in the Dokploy Domains tab for the `web` service on port `80`.

For a local container test:

```
docker build -t static-frontend .
docker run --rm -p 8080:80 static-frontend
```

Project structure
-----------------

[](#project-structure)

```
.
├── config.js
├── doc/
├── scripts/
├── src/
│   ├── data/
│   ├── pages/
│   ├── public/
│   ├── resources/fonts/
│   ├── scripts/
│   ├── styles/
│   └── views/
└── vite.config.js

```

- `src/data/main.json`: global site data shared across pages
- `src/pages/`: routes generated from `.twig` and `.json` files
- `src/views/`: layouts, templates, and Twig components
- `src/scripts/`: Vue components, directives, i18n config, and the main app entry
- `src/styles/`: Tailwind entry file, Sass partials, and Tailwind safelist
- `src/public/`: static assets copied to the final build
- `src/resources/fonts/`: local font files
- `doc/`: WordPress integration helpers

Working with pages
------------------

[](#working-with-pages)

The project supports both direct Twig pages and data-driven JSON pages.

### Twig page

[](#twig-page)

Create a file such as `src/pages/about.twig`:

```
{% extends 'views/layouts/main.twig' %}

{% block page %}

		About

{% endblock %}
```

### JSON page

[](#json-page)

Create a file such as `src/pages/about.json`:

```
{
	"title": "About",
	"template": "views/templates/page.twig",
	"flexible": [
		{
			"name": "content",
			"title": "About",
			"text": "Page content defined in JSON."
		}
	]
}
```

The default page templates in `src/views/templates/` loop over `flexible` blocks and include matching Twig partials from `src/views/components/flexible//_.twig`.

Styling
-------

[](#styling)

`src/styles/app.css` is the main entry point. It uses Tailwind CSS 4 and can also pull in Sass partials with `@use`.

- add reusable utilities directly in `src/styles/app.css`
- keep shared Sass helpers in `src/styles/base/`
- keep always-included Tailwind classes in `src/styles/safelist.txt`

Vue layer
---------

[](#vue-layer)

`src/scripts/app.ts` mounts Vue on `#page` and wires up:

- lazy loading for images and background assets
- locale detection through `vue-i18n`
- a small page transition/unload handler
- scroll-to-top behavior
- custom directives such as PhotoSwipe

Put Vue components in `src/scripts/components/` and directives in `src/scripts/directives/`.

Assets and Twig helpers
-----------------------

[](#assets-and-twig-helpers)

### Images

[](#images)

Store image files in `src/public/assets/images/` and render them with the Twig `image()` helper:

```
{% set media = {
	pictureClass: 'picture',
	image: {
		src: 'content/example',
		src_2x: 'content/example@2x',
		ext: 'png',
		webp: true,
		alt: 'Example image',
		width: 1200,
		height: 800
	}
} %}

{{ image(media) }}
```

When `webp` is enabled, the helper adds a WebP source in production builds.

### SVG spritemap

[](#svg-spritemap)

Place icons in `src/public/assets/icons/`. They are bundled into a spritemap automatically.

```
{{ sprite('instagram') }}
{{ sprite('instagram', 'h-6 w-6') }}
```

### SVG object helper

[](#svg-object-helper)

Use the `svg()` helper for standalone SVG files from `src/public/assets/images/`:

```
{{ svg({
	title: 'Brand logo',
	width: '40',
	height: '32',
	src: '/brand/logo.svg'
}) }}
```

### Fonts

[](#fonts)

Store local fonts in `src/resources/fonts/`. The Vite config exposes them through the `~fonts` alias.

Configuration
-------------

[](#configuration)

Main build options live in `config.js`.

- `base`: public base path used by Vite
- `rootDir`: Twig root directory passed to Vituum
- `assetsDir`: source directory used for icons and favicon generation
- `fonts`: font source and output path settings
- `htmlMinify`: HTML minification options
- `htmlBeautify`: optional beautify step after build
- `imagemin`: image optimization settings
- `SvgSpritemap`: SVG spritemap generation settings

Production favicon files are generated from `src/public/assets/favicon.svg`.

WordPress integration
---------------------

[](#wordpress-integration)

If the built assets need to be consumed by a WordPress theme, see:

- `doc/README.md`
- `doc/wp_vite_plugin.php`
- `doc/wp_vite_enqueue.php`

Those files cover both an MU plugin approach and a `functions.php` include approach.

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance94

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity49

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 ~42 days

Recently: every ~64 days

Total

24

Last Release

30d ago

Major Versions

2.2.9 → 3.0.02025-04-14

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/75448126?v=4)[Kyrylo Dorozhynskyi](/maintainers/kirilldorozhynskyi)[@kirilldorozhynskyi](https://github.com/kirilldorozhynskyi)

---

Top Contributors

[![kirilldorozhynskyi](https://avatars.githubusercontent.com/u/75448126?v=4)](https://github.com/kirilldorozhynskyi "kirilldorozhynskyi (178 commits)")

### Embed Badge

![Health badge](/badges/justdev-starter-frontend-twig/health.svg)

```
[![Health](https://phpackages.com/badges/justdev-starter-frontend-twig/health.svg)](https://phpackages.com/packages/justdev-starter-frontend-twig)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.5k10](/packages/helsingborg-stad-municipio)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

45444.2k1](/packages/pressbooks-pressbooks)[october/rain

October Rain Library

1601.7M83](/packages/october-rain)[pressbooks/pressbooks-book

This theme is named after Canadian media theorist Marshall McLuhan, who coined the phrase “the medium is the message.” It is designed for academic writing and is also suitable for fiction. Headings are set in Cormorant Garamond, and body type is set in Lora.

216.7k](/packages/pressbooks-pressbooks-book)[mediawiki/maps

Adds various mapping features to MediaWiki

84152.3k3](/packages/mediawiki-maps)[silverstripe-themes/simple

The SilverStripe simple theme (default SilverStripe 3 theme)

411.3M8](/packages/silverstripe-themes-simple)

PHPackages © 2026

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