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
This preset exclude any eslint configuration
This preset contains eslint configuration with Vue recommended code style rule enforced.
This preset contains eslint configuration with Vue + Airbnb JavaScript code style rule enforced.
$ composer require techrino/vue-tailwind-laravel-ui-preset
⚠️ WarningPlease the command below will overwrite some configuration that are listed in
$ ▶ 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
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.
$ npm install
# or
$ yarn install
$ npm run dev
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 |
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"]
}
}
}
}