Skip to content

Commit 82f3e45

Browse files
LukeTowersLukeTowers
authored
Improve organization
1 parent 182b190 commit 82f3e45

File tree

1 file changed

+102
-102
lines changed

1 file changed

+102
-102
lines changed

‎console/asset-compilation-vite.md

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,7 @@
11
# Asset Compilation - Vite
22

3-
## Registration
4-
53
By default, any plugin or theme containing a `vite.config.mjs` file at it's root will be automatically registered. Registered items can be viewed with the `vite:list` command.
64

7-
The following sections document additional ways to configure a Vite package, these are only required if you need additional customization.
8-
9-
### Registering plugins
10-
11-
To register frontend assets to be compiled through Vite in your plugin, simply return an array with the package names as the keys and the package paths relative to the plugin's directory as the values to register from your [`Plugin.php`](../plugin/registration) registration file's `registerVitePackages()` method. See below example.
12-
13-
```php
14-
public function registerVitePackages()
15-
{
16-
return [
17-
'custom-package-name' => 'assets/js/build.vite.js',
18-
];
19-
}
20-
```
21-
22-
### Registering themes
23-
24-
Registration of asset compilation of themes is even easier, and can be done by adding a `vite` definition to your [theme information file](../themes/development#theme-information-file) (`theme.yaml`).
25-
26-
```yaml
27-
name: "Winter CMS Demo"
28-
description: "Demonstrates the basic concepts of the frontend theming."
29-
author: "Winter CMS"
30-
homepage: "https://wintercms.com"
31-
code: "demo"
32-
33-
vite:
34-
<name of package>: vite.config.mjs
35-
```
36-
37-
The `vite` definition takes any number of registered packages as a YAML object, with the key being the name of the package as a kebab-case string and the location of your `vite.config.mjs` file relative to the theme's root directory.
38-
39-
For example, if you want to register two packages called `demo-theme-style` and `demo-theme-shop` located in the assets folder, you would use the following definition:
40-
41-
```yaml
42-
name: "Winter CMS Demo"
43-
description: "Demonstrates the basic concepts of the frontend theming."
44-
author: "Winter CMS"
45-
homepage: "https://wintercms.com"
46-
code: "demo"
47-
48-
vite:
49-
demo-theme-style: assets/style/vite.config.mjs
50-
demo-theme-shop: assets/shop/vite.config.mjs
51-
```
52-
53-
### Registering custom
54-
55-
You can configure a custom vite package that sits outside of plugins and themes.
56-
57-
```php
58-
use System\Classes\Asset\PackageManager;
59-
60-
PackageManager::instance()->registerPackage(
61-
name: 'my-custom-package',
62-
path: '/path/to/vite.config.mjs',
63-
type: 'vite'
64-
);
65-
```
66-
675
<div id="automatic-configuration"></div>
686

697
## Automatic Vite configuration
@@ -87,46 +25,6 @@ php artisan vite:create acme.example --tailwind
8725

8826
> **NOTE:** Winter will automatically pre-populate CSS/JS files with a basic setup of your chosen libraries. If you wish to only have the base configuration files generated then use the `--no-stubs` option.
8927
90-
## Manual Vite configuration
91-
92-
The Vite configuration file (`vite.config.mjs`) is a configuration file that manages the configuration of Laravel Vite itself. In conjunction with the `package.json` file that defines your dependencies, this file defines how Laravel Vite will compile your assets.
93-
94-
For more information, you can review [the Laravel docs](https://laravel.com/docs/11.x/vite) or the [Vite docs](https://vitejs.dev/config/).
95-
96-
Your `vite.config.mjs` file must include Vite as a requirement, and must also define the public path to the current directory, as follows:
97-
98-
```js
99-
import { defineConfig } from 'vite';
100-
import laravel from 'laravel-vite-plugin';
101-
102-
export default defineConfig({
103-
build: {
104-
outDir: "assets/dist",
105-
},
106-
plugins: [
107-
laravel({
108-
publicDirectory: "assets/dist",
109-
input: [
110-
'assets/src/css/example.css',
111-
'assets/src/js/example.js',
112-
],
113-
refresh: {
114-
paths: [
115-
'./**/*.htm',
116-
'./**/*.block',
117-
'assets/src/**/*.css',
118-
'assets/src/**/*.js',
119-
]
120-
},
121-
}),
122-
],
123-
});
124-
```
125-
126-
### Paths
127-
128-
When the `vite.config.mjs` file is evaluated, regardless of where you ran `vite:compile` from, the working directory is set to the parent directory of the `vite.config.mjs` file. That means that any relative paths used in the configuration will be relative to the current directory of the `vite.config.mjs` file.
129-
13028
## Vite vs. Mix
13129

13230
Vite works slightly differently to Mix, therefore this section documents the differences between the two and should help with anybody attempting to transition between the two.
@@ -220,3 +118,105 @@ php artisan vite:watch <package> [-f|--production] [-- <extra build options>]
220118
The `vite:watch` command is similar to the `vite:compile` command, except that it remains active and watches for any changes made to files that would be affected by your compilation. When any changes are made, a compile is automatically executed. This is useful for development in allowing you to quickly make changes and review them in your browser.
221119

222120
With this command, only one package can be provided and watched at any one time.
121+
122+
## Manual Vite configuration
123+
124+
The Vite configuration file (`vite.config.mjs`) is a configuration file that manages the configuration of Laravel Vite itself. In conjunction with the `package.json` file that defines your dependencies, this file defines how Laravel Vite will compile your assets.
125+
126+
For more information, you can review [the Laravel docs](https://laravel.com/docs/11.x/vite) or the [Vite docs](https://vitejs.dev/config/).
127+
128+
Your `vite.config.mjs` file must include Vite as a requirement, and must also define the public path to the current directory, as follows:
129+
130+
```js
131+
import { defineConfig } from 'vite';
132+
import laravel from 'laravel-vite-plugin';
133+
134+
export default defineConfig({
135+
build: {
136+
outDir: "assets/dist",
137+
},
138+
plugins: [
139+
laravel({
140+
publicDirectory: "assets/dist",
141+
input: [
142+
'assets/src/css/example.css',
143+
'assets/src/js/example.js',
144+
],
145+
refresh: {
146+
paths: [
147+
'./**/*.htm',
148+
'./**/*.block',
149+
'assets/src/**/*.css',
150+
'assets/src/**/*.js',
151+
]
152+
},
153+
}),
154+
],
155+
});
156+
```
157+
158+
### Paths
159+
160+
When the `vite.config.mjs` file is evaluated, regardless of where you ran `vite:compile` from, the working directory is set to the parent directory of the `vite.config.mjs` file. That means that any relative paths used in the configuration will be relative to the current directory of the `vite.config.mjs` file.
161+
162+
## Registration
163+
164+
The following sections document additional ways to configure a Vite package, these are only required if you need additional customization.
165+
166+
### Registering plugins
167+
168+
To register frontend assets to be compiled through Vite in your plugin, simply return an array with the package names as the keys and the package paths relative to the plugin's directory as the values to register from your [`Plugin.php`](../plugin/registration) registration file's `registerVitePackages()` method. See below example.
169+
170+
```php
171+
public function registerVitePackages()
172+
{
173+
return [
174+
'custom-package-name' => 'assets/js/build.vite.js',
175+
];
176+
}
177+
```
178+
179+
### Registering themes
180+
181+
Registration of asset compilation of themes is even easier, and can be done by adding a `vite` definition to your [theme information file](../themes/development#theme-information-file) (`theme.yaml`).
182+
183+
```yaml
184+
name: "Winter CMS Demo"
185+
description: "Demonstrates the basic concepts of the frontend theming."
186+
author: "Winter CMS"
187+
homepage: "https://wintercms.com"
188+
code: "demo"
189+
190+
vite:
191+
<name of package>: vite.config.mjs
192+
```
193+
194+
The `vite` definition takes any number of registered packages as a YAML object, with the key being the name of the package as a kebab-case string and the location of your `vite.config.mjs` file relative to the theme's root directory.
195+
196+
For example, if you want to register two packages called `demo-theme-style` and `demo-theme-shop` located in the assets folder, you would use the following definition:
197+
198+
```yaml
199+
name: "Winter CMS Demo"
200+
description: "Demonstrates the basic concepts of the frontend theming."
201+
author: "Winter CMS"
202+
homepage: "https://wintercms.com"
203+
code: "demo"
204+
205+
vite:
206+
demo-theme-style: assets/style/vite.config.mjs
207+
demo-theme-shop: assets/shop/vite.config.mjs
208+
```
209+
210+
### Registering custom
211+
212+
You can configure a custom vite package that sits outside of plugins and themes.
213+
214+
```php
215+
use System\Classes\Asset\PackageManager;
216+
217+
PackageManager::instance()->registerPackage(
218+
name: 'my-custom-package',
219+
path: '/path/to/vite.config.mjs',
220+
type: 'vite'
221+
);
222+
```

0 commit comments

Comments
 (0)