Fork of the craft-vue template that integrates the Tailwind CSS utility framework & removes unused CSS with Purgecss.
npm run dev/
yarn dev: first-in-class development experience.
- Webpack +
vue-loaderfor 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
- Webpack +
npm run build/
yarn build: Production ready build.
- Babel compiling
- CSS across all components extracted into a single file and minified with 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
You should fork this repo to create your own opinionated boilerplate for your setup. This template makes no assumptions about pre-processors, template structure, or linting configurations.
This boilerplate requires Vue CLI 3 be installed globally on your machine.
# create & install project
composer create-project chasegiunta/craft-vue-tailwind PATH
# run Craft's setup & install
# install the Twigpack plugin
./craft plugin/install twigpack
# install dependencies
npm install # yarn
# (optional) initialize Tailwind's config file (tailwind.config.js)
# run dev server (default runs on localhost:8080)
npm run dev # yarn dev (alias for 'yarn serve')
# build for production with minification
npm run build # yarn build
Once up and running, the fun part comes in using Vue CLI's GUI to customize your project to suite your needs. Simply run
vue ui and import your newly created project to get started.
You can also run your
build tasks from the GUI to get valuable build stats & runtime analytics.
NOTE: During development, only your assets will be served from
If webpack's dev server (
yarn dev) is not running, Twigpack will serve your assets from the build directory.
This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
npm install sass-loader node-sass --save-dev
# yarn add sass-loader node-sass --dev
Note you also need to install node-sass because sass-loader depends on it as a peer dependency.
Read more about this at https://cli.vuejs.org/guide/css.html#pre-processors
Any vue components placed within
src/components will be registered with Vue automatically. You may nest these in subfolders if you wish.
This boilerplate uses babel-preset-env for configuring babel. You can read more about it here.
You can enable linting by adding the
@vue/cli-plugin-eslint plugin through the GUI