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. justdev/starter\_frontend\_twig ActiveProject justdev/starter\_frontend\_twig =============================== Vite front-end twig boilerplate 3.2.1(1mo ago)025MITTwigPHP >=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 1mo ago READMEChangelog (4)Dependencies (2)Versions (24)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 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 40 — FairBetter than 88% of packages Maintenance90 Actively maintained with recent releases Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity48 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 ~43 days Recently: every ~88 days Total 22 Last Release 47d ago Major Versions 2.2.9 → 3.0.02025-04-14 ### Community Maintainers ![](https://www.gravatar.com/avatar/48883cff03a899c6a325b86708b00bf9235a94ae4d601965e80171d09927bf60?d=identicon)[kirilldorozhynskyi](/maintainers/kirilldorozhynskyi) --- Top Contributors [![kirilldorozhynskyi](https://avatars.githubusercontent.com/u/75448126?v=4)](https://github.com/kirilldorozhynskyi "kirilldorozhynskyi (168 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 [elgg/elgg Elgg is an award-winning social networking engine, delivering the building blocks that enable businesses, schools, universities and associations to create their own fully-featured social networks and applications. 1.7k15.7k5](/packages/elgg-elgg)[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. 44643.1k1](/packages/pressbooks-pressbooks)[johnbillion/user-switching Instant switching between user accounts in WordPress and WooCommerce. 19768.3k2](/packages/johnbillion-user-switching)[rainlab/blog-plugin Blog plugin for October CMS 17257.7k](/packages/rainlab-blog-plugin)[rainlab/user-plugin User plugin for October CMS 11954.3k13](/packages/rainlab-user-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)