/craft-vue-tailwind

Fork of craft-vue template that integrates the Tailwind CSS utility framework & removes unused CSS with Purgecss.

Primary LanguagePHPMIT LicenseMIT

craft-vue-tailwind

Fork of the craft-vue template that integrates the Tailwind CSS utility framework & removes unused CSS with Purgecss.

What's Included

  • npm run dev / yarn dev: first-in-class development experience.

    • 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

  • npm run build / yarn build: Production ready build.

    • JavaScript minification with UglifyJS v3
    • 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

Fork It And Make Your Own

You should fork this repo to create your own boilerplate. This scaffold makes no assumptions about pre-processor, babel, or linting configurations.

Setup

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
./craft setup

# install the Asset Rev plugin
./craft install/plugin assetrev

# install dependencies
npm install # yarn

# initialize Tailwind's config file (tailwind.js)
./node_modules/.bin/tailwind init

# append shadowLookup experiment flag to end of tailwind.js file
# (this step will be removed in an upcoming release)
experiments: {
    shadowLookup: true,
}

# 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 dev & build tasks from the GUI to get valuable build stats & runtime analytics.

NOTE: During development, only your assets will be served from localhost:8080 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.

Vue's CLI may incorrectly output the wrong URL for the dev server:

App running at: http://localhost:8080/http://localhost:8080/
# Ignore this bug. Your server will be running at http://localhost:8080

After running npm run 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.

Tailwind directives in .vue files

Using Tailwind directives (@apply, etc.) inside of Vue's single file components is now possible with the addition of an expirimental shadowLookup flag enabled in your tailwind.js file (added in Tailwind v0.6.2 - hooray!).

Pre-Processors

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

Automatic Component Registration

Any vue components placed within src/components will be registered with Vue automatically. This requires their filenames to be in PascalCase, eg. MyVueComponent.vue

Babel Compiling

This boilerplate uses babel-preset-env for configuring babel. You can read more about it here.

Linting

You can enable linting by adding the @vue/cli-plugin-eslint plugin through the GUI vue ui.