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:

.env

PHP_EXECUTABLE_PATH=/custom/path/to/php

shell

PHP_EXECUTABLE_PATH="custom/path/to/php" npm run dev

package.json

{
	"scripts": {
		"dev": "PHP_EXECUTABLE_PATH=custom/path/to/php vite",
		"build": "PHP_EXECUTABLE_PATH=custom/path/to/php vite build"
	},
}