Vite configuration
Overview
The Vite plugin, in addition to providing Hybridly-specific features, wraps a few external Vite plugins that are often needed in single-page applications.
These plugins are provided with a good default configuration, but are still individually configurable.
Laravel
laravel-vite-plugin
, the official Vite plugin for Laravel, is included and its input
option is configured to <root>/application/main.ts
.
To customize this, use the laravel
option:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
laravel: {
detectTls: true,
},
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
laravel: {
detectTls: true,
},
}),
],
})
The plugin can be disabled by setting laravel
to false
.
Vue
@vitejs/plugin-vue
, the official Vue 3 plugin, is included by default. It can be disabled or configured by setting the vue
option:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
vue: {
reactivityTransform: true
},
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
vue: {
reactivityTransform: true
},
}),
],
})
Run
vite-plugin-run
, which allows for executing shell commands when files are updated in the project, is used to generate TypeScript definitions and language files automatically.
You may add custom runner rules by using the run
option:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
run: [
{ /* Custom runner object */ },
],
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
run: [
{ /* Custom runner object */ },
],
}),
],
})
The plugin can be disabled by setting run
to false
.
Auto-imports
unplugin-auto-import
is included to support auto-importing of Hybridly utils, Vue functions such as ref
or computed
, or utils and composables in your <root>/composables
and <root>/utils
directories.
You may disable it by setting autoImports
to false
or override its configuration by using the same key:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
autoImports: {
eslintrc: {
enabled: true
}
},
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
autoImports: {
eslintrc: {
enabled: true
}
},
}),
],
})
Vue components
unplugin-vue-components
is included to support auto-importing of Vue components.
Currently, Hybridly auto-imports the following:
- Headless UI components, if the package is installed
- All components specified by your current architecture
- Components in
resources/components
- The Link component
You may disable it by setting vueComponents
to false
, or you may update its configuration instead:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
vueComponents: {
linkName: 'HybridlyLink',
},
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
vueComponents: {
linkName: 'HybridlyLink',
},
}),
],
})
Disabling
Disabling vueComponents
would also de-active auto-importing of icons and built-in components such as <router-link>
.
Icons
unplugin-icons
is included to provide Iconify and custom icons support.
It may be disabled by setting icons
to false
, or you may adjust its configuration if needed:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
icons: {
autoInstall: false
},
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
icons: {
autoInstall: false
},
}),
],
})
Icons can be imported manually or automatically:
<script setup lang="ts">
import IconAccessibility from '~icons/carbon/accessibility'
</script>
<template>
<i-carbon-accessibility class="w-4" />
</template>
<script setup lang="ts">
import IconAccessibility from '~icons/carbon/accessibility'
</script>
<template>
<i-carbon-accessibility class="w-4" />
</template>
Custom icons
Custom icon collections may be defined using the customIcons
option:
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
customIcons: ['aircraft'],
}),
],
})
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
customIcons: ['aircraft'],
}),
],
})
To register icons, add .svg
files under the <root>/icons/<collection>
directories:
resources/
└── icons/
└── aircraft/
├── pc12.svg
├── pc24.svg
└── sf50.svg
resources/
└── icons/
└── aircraft/
├── pc12.svg
├── pc24.svg
└── sf50.svg
Custom icons can be then be imported like other icons:
<script setup lang="ts">
import pc12 from '~icons/aircraft/pc12'
</script>
<template>
<i-aircraft-pc12 class="w-10" />
</template>
<script setup lang="ts">
import pc12 from '~icons/aircraft/pc12'
</script>
<template>
<i-aircraft-pc12 class="w-10" />
</template>