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.
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
},
}),
],
})
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 */ },
],
}),
],
})
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
}
},
}),
],
})
Vue components
unplugin-vue-components
is included to support auto-importing of Vue components.
Currently, Hybridly auto-imports the following:
- Headless UI and Radix components, if the corresponding packages are 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',
},
}),
],
})
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
},
}),
],
})
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>
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'],
}),
],
})
To register icons, add .svg
files under the <root>/icons/<collection>
directories:
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>
Warn on local builds
When working on Vite-powered applications using Laravel, the development server generally has to be started, but some people prefer not running it until actually needed.
This may create confusion when forgetting about it and updating front-end-related code, because changes will not appear in the browser until the server is started.
To help with this, this plugin displays a discreet warning at the bottom of the screen when the application has been built locally (eg. when APP_ENV
is local
).
You may disable this warning by setting warnOnLocalBuilds
to false
.
import { defineConfig } from 'vite'
import hybridly from 'hybridly/vite'
export default defineConfig({
plugins: [
hybridly({
warnOnLocalBuilds: false,
}),
],
})
PHP executable path
If your PHP executable is not php
, you may configure the path used by Hybridly by updating the PHP_EXECUTABLE_PATH
.
This variable can be configured in your .env
, or before starting Vite:
PHP_EXECUTABLE_PATH=/custom/path/to/php
PHP_EXECUTABLE_PATH="custom/path/to/php" npm run dev
{
"scripts": {
"dev": "PHP_EXECUTABLE_PATH=custom/path/to/php vite",
"build": "PHP_EXECUTABLE_PATH=custom/path/to/php vite build"
},
}