PHPackages madebykind/craft-vue-tailwind - 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. [Utility & Helpers](/categories/utility) 4. / 5. madebykind/craft-vue-tailwind ActiveProject[Utility & Helpers](/categories/utility) madebykind/craft-vue-tailwind ============================= Craft CMS + Vue.js + TailwindCSS + Nanobox Boilerplate 4.1.7(6y ago)3491[3 issues](https://github.com/madebykind/craft-vue-tailwind-nanobox/issues)[6 PRs](https://github.com/madebykind/craft-vue-tailwind-nanobox/pulls)MITJavaScript Since Apr 9Pushed 5y ago2 watchersCompare [ Source](https://github.com/madebykind/craft-vue-tailwind-nanobox)[ Packagist](https://packagist.org/packages/madebykind/craft-vue-tailwind)[ Docs](https://craftcms.com/)[ RSS](/packages/madebykind-craft-vue-tailwind/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependencies (5)Versions (44)Used By (0) Vue-cli 💕 CraftCMS 💕 Fractal 💕 Tailwind 💕 Nanobox 💕 Oh my! ========================================================== [](#vue-cli--craftcms--fractal--tailwind--nanobox--oh-my) What is it? ----------- [](#what-is-it) Fork of [craft-vue-tailwind](https://github.com/chasegiunta/craft-vue) composer project template that integrates: - [Nanobox](https://nanobox.io/) for development environments - [git-flow](https://github.com/nvie/gitflow) as a branching/release strategy - [CraftCMS](https://craftcms.com/) for content management - [Fractal](https://fractal.build/) as a living styleguide - [Tailwind](https://tailwindcss.com/) utility first CSS framework - [Purgecss](https://www.purgecss.com/) for build optimisation - [Jest](https://jestjs.io/) for front end unit tests - [Vuejs](https://vuejs.org/) for fancypants JavaScript stuff - [Husky](https://github.com/typicode/husky) for git hooks - [Hygen](https://www.hygen.io/) for scaffolding components - [eslint](https://eslint.org/) & [Prettier](https://prettier.io/) for linting and code formatting Via the combined magic of [composer](https://getcomposer.org/) and [vue-cli](https://cli.vuejs.org/) to give you an all singing, all dancing, pre-configured dev environment What's included? ---------------- [](#whats-included) - Webpack + `vue-loader` for single file Vue components - State preserving hot-reload - Page reloading on file edits (twig, html, etc) - State preserving compilation error overlay - Lint-on-save with ESLint - Source maps - Fractal living styleguide with asset sync - Load styleguide twig templates in Craft by prefixing include name with `@` Requirements ------------ [](#requirements) This template requires the following software / packages to be installed in the host machine - [Nanobox](https://dashboard.nanobox.io/download) (requiress free account signup) - PHP 7.3 - git and [git-flow](https://github.com/nvie/gitflow) - [Composer](https://getcomposer.org/) - [Node.js](https://nodejs.org/) - [Yarn](https://yarnpkg.com/) - [vue-cli](https://cli.vuejs.org/) Installing on a new machine? Not actually a developer? Install homebrew and then grab all the above apart from Nanobox at once: ``` brew install php composer node yarn git git-flow ``` **NB if installing Nanobox for the first time be sure to follow the post-install instructions for recent versions of macOS** How to use ========== [](#how-to-use) Creating a new project ---------------------- [](#creating-a-new-project) ``` # create & install project composer create-project madebykind/craft-vue-tailwind cd # install deps and basic setup ./scripts/project/after-install # customise the project yarn project:configure # apply environment settings yarn project:apply-env # install Craft in nanobox nanobox run # once you're inside the nanobox container yarn project:setup-craft # build fractal -> twig pathmap yarn build:components ``` Getting an existing project running ----------------------------------- [](#getting-an-existing-project-running) ``` git clone cd # create .env cp .env.example .env # install deps and basic setup ./scripts/project/after-install # install Craft yarn project:setup-craft ``` Accessing the CraftCMS database ------------------------------- [](#accessing-the-craftcms-database) By default Craft is set up to use [Project Config](https://docs.craftcms.com/v3/project-config.html), so you shouldn't often need to import / export a database from the site, however, if you do, you can get local mysql credentials in your host machine by running ``` nanobox info local ``` You can then use the credentials shown under `data.db` to access mysql via the cli or a [GUI](https://sequelpro.com/) as you wish Dev workflow... --------------- [](#dev-workflow) Run the servers: ``` # run each of these in their own terminal pane yarn serve yarn test:watch yarn serve:craft ``` Create a new front end component: ``` # Interactively skeleton a new component yarn generate:component ``` Commands -------- [](#commands) ### Dev environment [](#dev-environment) - `yarn serve`: start the webpack dev server + fractal server (NB this does not start the craft/PHP server, as you will often want this to run in another process) - `yarn serve:assets` start the webpack server above but without fractal running - `yarn serve:fractal` start the fractal server - `yarn serve:craft` start the nanobox container that serves CraftCMS ### Generators [](#generators) Via Hygen, templates in `_templates/` - `yarn generate:component` interactively generate a new front end component ### Linting [](#linting) - `lint` what you'd expect - `lint:autofix` lint and fix automatically where possible (run automatically pre-commit and pre-push) - `lint:config-check` check the eslint config for rules that conflict with prettier ### Tests [](#tests) - `test:unit` run the unit tests (run automatically pre-push) - `test:watch` run the tests on code change - `test:coverage` calc code coverage stats ### Building for production [](#building-for-production) - `yarn build`: Production ready build. - JavaScript minification with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony) - Babel compiling - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano) - Static assets compiled with version hashes for efficient long-term caching - Removes unused CSS with Purgecss. Includes whitelister to keep third-party libraries untouched. - Bundle size analytics - Builds the living tyleguide to static HTML Configuration (optional) ------------------------ [](#configuration-optional) To edit the vue-cli config via the UI you will require Vue CLI 3 to be [installed globally on your machine](https://cli.vuejs.org/guide/installation.html). You can run `vue ui` and import your the project to get started customising the configuration with vue-cli plugins of your choice. **NB** By default the project uses a randomly allocated ports for webpack dev server and fractal server, which are set by the `project:configure` command run during project setup, stored project-wide under the `kindConfig` key in `package.json` and loaded into your `.env` file via the `project:apply-env` command. In order for the UI to work`vue-cli` requires you to run the project on it's default port (8080). To use the UI to configure your project you'll therefore need to temporarily change `ASSET_SERVER_PORT` in your `.env` file to `8080` and restart your `serve` process, then change it back to its previous value once you've finished. Under the hood ============== [](#under-the-hood) WTF is all this dark magic? --------------------------- [](#wtf-is-all-this-dark-magic) This project automates a *lot* of dull manual tasks. If you want to understand what's going on, here's a quick rundown 1. After composer creates the project, it runs the `post-create-project-cmd` script, which: - sets up your .env file - replaces the project's composer.json with one that's specific for your project - cleans up some files that aren't needed - dumps composer's autoloader - runs `scripts/project/after-install` which then... -------------------------------------------------- [](#runs-scriptsprojectafter-install-which-then) How asset loading works ----------------------- [](#how-asset-loading-works) **NOTE:** During development, *only your assets* will be served from `localhost:` and referenced in the base template. You'll still load your site locally under your normal development domain (mysite.test, etc.). This will also cause a brief unstyled flash on page loads due to JS/CSS assets loading from javascript for development. **This flash isn't present after build, on production**. After running `yarn build`, the easiest way to test your build files locally is to comment the environment variable in your `.env` file, and refresh the page. This will serve your assets from the build directory, rather than webpack's dev server. For a detailed explanation on how things work, check out the [Vue CLI docs](https://cli.vuejs.org/). Babel Compiling --------------- [](#babel-compiling) This boilerplate uses babel-preset-env for configuring babel. [You can read more about it here.](https://cli.vuejs.org/config/#babel) Thanks ------ [](#thanks) Forked from [chasegiunta/craft-vue-tailwind](https://github.com/chasegiunta/craft-vue-tailwind) ### Health Score 29 — LowBetter than 57% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community18 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~20 days Recently: every ~9 days Total 36 Last Release 2311d ago Major Versions 1.1.1 → v2.0.02018-08-04 2.1.7 → 3.0.02019-03-08 3.3.1 → 4.0.02019-12-16 ### Community Maintainers ![](https://www.gravatar.com/avatar/47e2ca034fe7540f4075144cf3a5222efc502f48de0ca0c84eccd7fbda2fbbe6?d=identicon)[madebykind](/maintainers/madebykind) --- Top Contributors [![tomdavies](https://avatars.githubusercontent.com/u/136308?v=4)](https://github.com/tomdavies "tomdavies (160 commits)")[![brandonkelly](https://avatars.githubusercontent.com/u/47792?v=4)](https://github.com/brandonkelly "brandonkelly (125 commits)")[![chasegiunta](https://avatars.githubusercontent.com/u/1377169?v=4)](https://github.com/chasegiunta "chasegiunta (55 commits)")[![angrybrad](https://avatars.githubusercontent.com/u/61869?v=4)](https://github.com/angrybrad "angrybrad (4 commits)")[![samuelgoddard](https://avatars.githubusercontent.com/u/8715435?v=4)](https://github.com/samuelgoddard "samuelgoddard (3 commits)")[![carlcs](https://avatars.githubusercontent.com/u/7516543?v=4)](https://github.com/carlcs "carlcs (3 commits)")[![benjamindavid](https://avatars.githubusercontent.com/u/2911900?v=4)](https://github.com/benjamindavid "benjamindavid (2 commits)")[![jamesmacwhite](https://avatars.githubusercontent.com/u/8067792?v=4)](https://github.com/jamesmacwhite "jamesmacwhite (2 commits)")[![mildlygeeky](https://avatars.githubusercontent.com/u/273266?v=4)](https://github.com/mildlygeeky "mildlygeeky (2 commits)")[![cromwellryan](https://avatars.githubusercontent.com/u/129756?v=4)](https://github.com/cromwellryan "cromwellryan (1 commits)")[![geenious](https://avatars.githubusercontent.com/u/26128416?v=4)](https://github.com/geenious "geenious (1 commits)")[![jasonmccallister](https://avatars.githubusercontent.com/u/5354908?v=4)](https://github.com/jasonmccallister "jasonmccallister (1 commits)") --- Tags cmstailwindprojectCraftcraftcmsvuetailwindcssVue.jsvue js ### Embed Badge ![Health badge](/badges/madebykind-craft-vue-tailwind/health.svg) ``` [![Health](https://phpackages.com/badges/madebykind-craft-vue-tailwind/health.svg)](https://phpackages.com/packages/madebykind-craft-vue-tailwind) ``` ### Alternatives [craftcms/feed-me Import content from XML, RSS, CSV or JSON feeds into entries, categories, Craft Commerce products, and more. 292943.4k27](/packages/craftcms-feed-me)[verbb/formie The most user-friendly forms plugin for Craft. 100387.6k58](/packages/verbb-formie)[verbb/vizy A flexible visual editor field for Craft. 4249.7k](/packages/verbb-vizy)[verbb/hyper A user-friendly links field for Craft. 24142.6k12](/packages/verbb-hyper)[verbb/social-poster Automatically post entries to social media. 918.5k](/packages/verbb-social-poster)[verbb/icon-picker A slick field to pick icons from. Supports SVGs, Sprites, Webfonts, Font Awesome and more. 16168.8k6](/packages/verbb-icon-picker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)