Vue Tailwind Laravel UI Preset

What's inside this presets?

• Vue 2.6.12
• Laravel Mix 5
• Tailwind 1.8.x
• Pug Template Engine for writing Vue SFC template
• ESLint (Optional)
  • ESLint Import Resolver Alias
  • ESLint Airbnb config

Available Presets

vue-tailwind-preset

This preset exclude any eslint configuration

vue-tailwind-eslint-preset

This preset contains eslint configuration with Vue recommended code style rule enforced.

vue-tailwind-airbnb-eslint-preset

This preset contains eslint configuration with Vue + Airbnb JavaScript code style rule enforced.

1.0 Installation

$ composer require techrino/vue-tailwind-laravel-ui-preset

1.1 Initialize Preset

⚠️ Warning

Please the command below will overwrite some configuration that are listed in

List of created configuration

$ ▶ artisan ui vue-tailwind
  
   Select a frontend stack:
    [vue-tailwind-preset              ] Vue + Tailwind CSS
    [vue-tailwind-eslint-preset       ] Vue + Tailwind CSS + ESLint
    [vue-tailwind-airbnb-eslint-preset] Vue + Tailwind CSS + airbnb ESLint
   > 
   # Using directional key select a choice

1.1.1 List of created configuration

Once the command above is executed, these configurations file will be placed to your projects.

./tailwind.config.js
./postcss.config.js
./webpack.config.js
./webpack.mix.js
./.eslintrc.json
./.eslintignore
./resources/views
./cypress <- E2E Testing Scripts for preset
./resources/views/presets/vue-tailwind-preset
./resources/presets/vue-tailwind-preset
./public/presets <- image assets

An extra route /vue-tailwind-laravel-ui-preset will be added to routes/web.php for testing out the preset.

1.2 Install Frontend packages

$ npm install
# or
$ yarn install

1.3 Build Packages

$ npm run dev

1.4 Additional Configuration

A webpack alias also get preconfigured in this preset, by default these alias can be used in any .vue or .js file

| Alias | Path | |:----|:---| | @ | resources/presets/vue-tailwind-preset/vue | | @css | resources/presets/vue-tailwind-preset/css |

Manage your webpack Alias

All the alias are pre-configured in webpack.config.js you can modify it based on your usage.

module.exports =
    {
        resolve: {
        roots: [
          path.resolve(__dirname, 'resources/presets/vue-tailwind-preset/vue/'),
        ],
          extensions: [ '.js', '.vue', '.scss', '.css'],
          alias: {
            "@": `${__dirname}/resources/presets/vue-tailwind-preset/vue`,
            "@css": `${__dirname}/resources/presets/vue-tailwind-preset/css`,
          },
        modules: [
          'node_modules',
    
        ]
    }
};

If you are using vue-tailwind-eslint-preset don't forget to update the alias in .eslintrc.json at settings section

{
"settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["@", "./resources/presets/vue-tailwind-preset/vue"],
                    ["@css", "./resources/presets/vue-tailwind-preset/css"]
                ],
                "extensions": [".js", ".vue"]
            }
        }
    }
}