\/\/ via NPM<\/span><\/div>
<\/span>npm<\/span> i wordpress-vite-plugin<\/span><\/div>
\n<\/span><\/div>
\/\/ or via Yarn<\/span><\/div>
<\/span>yarn<\/span> <\/span>add<\/span> wordpress-vite-plugin<\/span><\/div><\/code><\/pre>
Now load up your Vite config file and include the following:<\/p>\n\n\n\n
1<\/span>import<\/span> <\/span>{<\/span> defineConfig <\/span>}<\/span> <\/span>from<\/span> <\/span>\"vite\"<\/span>;<\/span><\/span><\/span><\/div>
2<\/span><\/span>import<\/span> <\/span>{<\/span> wordpress <\/span>}<\/span> <\/span>from<\/span> <\/span>\"wordpress-vite-plugin\"<\/span>;<\/span><\/span><\/span><\/div>
3<\/span>\n<\/span><\/span><\/div>
4<\/span><\/span>export<\/span> <\/span>default<\/span> <\/span>defineConfig<\/span>(<\/span>{<\/span><\/span><\/span><\/div>
5<\/span>    <\/span>plugins<\/span>:<\/span> <\/span>[<\/span><\/span><\/span><\/div>
6<\/span>        <\/span>wordpress<\/span>(<\/span>{<\/span><\/span><\/span><\/div>
7<\/span>            <\/span>input<\/span>:<\/span> <\/span>\"src\/main.js\"<\/span>,<\/span><\/span><\/span><\/div>
8<\/span>            <\/span>namespace<\/span>:<\/span> <\/span>\"theme-vite\"<\/span>,<\/span><\/span><\/span><\/div>
9<\/span>        <\/span>}<\/span>)<\/span>,<\/span><\/span><\/span><\/div>
10<\/span>    <\/span>]<\/span>,<\/span><\/span><\/span><\/div>
11<\/span><\/span>}<\/span>)<\/span>;<\/span><\/span><\/div><\/code><\/pre>
If you\u2019re using Vue, don\u2019t forget to include the following when defining your vue plugin:<\/p>\n\n\n\n
1<\/span>vue<\/span>(<\/span>{<\/span><\/span><\/span><\/div>
2<\/span>\t<\/span>template<\/span>:<\/span> <\/span>{<\/span><\/span><\/span><\/div>
3<\/span>       <\/span>transformAssetUrls<\/span>:<\/span> <\/span>{<\/span><\/span><\/span><\/div>
4<\/span>          <\/span>base<\/span>:<\/span> <\/span>false<\/span>,<\/span><\/span><\/span><\/div>
5<\/span>          <\/span>includeAbsolute<\/span>:<\/span> <\/span>false<\/span><\/span><\/span><\/div>
6<\/span>       <\/span>}<\/span><\/span><\/span><\/div>
7<\/span>    <\/span>}<\/span><\/span><\/span><\/div>
8<\/span><\/span>}<\/span>)<\/span><\/span><\/div><\/code><\/pre>
You can pass an array of inputs to the wordpress plugin if you want. Full details on configuration below.<\/p>\n\n\n\n
Enqueueing Scripts \/ Styles<\/h2>\n\n\n\n
In either your plugin\u2019s entry file, or your theme\u2019s functions.php<\/code> file, enter the following:<\/p>\n\n\n\n
1<\/span><<\/span>?<\/span>php<\/span><\/span><\/div>
2<\/span>\n<\/span><\/span><\/div>
3<\/span>use EvoMark\\WpVite\\WpVite<\/span>;<\/span><\/span><\/span><\/div>
4<\/span>\n<\/span><\/span><\/div>
5<\/span>$vite <\/span>=<\/span> <\/span>new<\/span> <\/span>WpVite<\/span>(<\/span>)<\/span>;<\/span><\/span><\/span><\/div>
6<\/span>$vite<\/span>-<\/span>><\/span>enqueue<\/span>(<\/span>[<\/span><\/span><\/span><\/div>
7<\/span>\t<\/span>'input'<\/span> <\/span>=<\/span>><\/span> <\/span>\"src\/main.js\"<\/span>,<\/span><\/span><\/span><\/div>
8<\/span>\t<\/span>'namespace'<\/span> <\/span>=<\/span>><\/span> <\/span>'theme-vite'<\/span><\/span><\/span><\/div>
9<\/span><\/span>]<\/span>)<\/span>;<\/span><\/span><\/div><\/code><\/pre>
Note that both input<\/code> and namespace<\/code> must match the values you declared in your Vite config file exactly<\/strong>.<\/p>\n\n\n\n
PHP Parameters<\/h2>\n\n\n\n
The enqueue<\/code> function takes a single associative array as an argument. Inside that array, you can pass the following parameters<\/p>\n\n\n\n
Param<\/strong><\/td>
Type<\/strong><\/td>
Default<\/strong><\/td>
Description<\/strong><\/td><\/tr>
input<\/td>
string | string[]<\/td>
<none> required<\/strong><\/td>
The entry points of your Vite bundle. These must match exactly the ones defined in your Vite config file<\/td><\/tr>
namespace<\/td>
string<\/td>
<none> required<\/strong><\/td>
A unique namespace for the manifest (collection of entry points and their dependencies) being enqueued<\/td><\/tr>
admin<\/td>
bool<\/td>
false<\/td>
Enqueue the inputs for WordPress admin pages instead of frontend<\/td><\/tr>
dependencies<\/td>
string[]<\/td>
[]<\/td>
WordPress JS dependencies for your manifest<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Vite Plugin Parameters<\/h2>\n\n\n\n
Both input<\/code> and namespace<\/code> are the same as above. You do not need to pass a dependencies array to the Vite plugin since these will be detected automatically. Speaking of\u2026<\/p>\n\n\n\n
WordPress dependencies<\/h2>\n\n\n\n
You should have already included any dependencies your manifest requires in your PHP call to enqueue. These may comprise any of the scripts registered by WordPress<\/a>.<\/p>\n\n\n\n
Because of how WordPress delivers its dependencies to the frontend, we have to handle them slightly differently depending on whether we\u2019re working in development mode (with Hot Module Reloading) or in production mode. For the former, we want to import them as standard NPM modules, for the latter, we want to use the versions that WordPress will put on the window<\/code> object. Fortunately, the plugin handles all of that for you. So in your project, it\u2019s as simple as:<\/p>\n\n\n\n
import<\/span> <\/span>{<\/span> __ <\/span>}<\/span> <\/span>from<\/span> <\/span>\"@wordpress\/i18n\"<\/span>;<\/span><\/span><\/div>
\n<\/span><\/div>
<\/span>console<\/span>.<\/span>log<\/span>(<\/span>__<\/span>(<\/span>\"Hello World\"<\/span>,<\/span> <\/span>\"evomark-wp-vite\"<\/span>)<\/span>)<\/span>;<\/span><\/div><\/code><\/pre>
Don\u2019t forget to install the @wordpress\/i18n<\/code> package as a devDependency with your prefered package manager.<\/p>\n\n\n\n
Running your Vite project<\/h2>\n\n\n\n
From the root of your project directory (either the plugin folder or your theme folder) you can now run Vite. You may find it helpful to add the following scripts to your package.json<\/code> file.<\/p>\n\n\n\n
1<\/span>\"scripts\"<\/span>:<\/span> <\/span>{<\/span><\/span><\/span><\/div>
2<\/span>    <\/span>\"dev\"<\/span>:<\/span> <\/span>\"vite\"<\/span>,<\/span><\/span><\/span><\/div>
3<\/span>    <\/span>\"prod\"<\/span>:<\/span> <\/span>\"vite build\"<\/span><\/span><\/span><\/div>
4<\/span><\/span>}<\/span><\/span><\/div><\/code><\/pre>
Thoughts and comments<\/h2>\n\n\n\n
For feedback on the PHP part of the project, head here: https:\/\/github.com\/evo-mark\/wp-vite<\/a><\/p>\n\n\n\n
Or for the JavaScript part: https:\/\/github.com\/evo-mark\/wordpress-vite-plugin<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Being quite fond of working with Laravel, one of the major pain points when coming to a WordPress site is the complexity in using JS frameworks and bundlers. Vite is especially tricky since during development, it utilises Hot Module Reloading which allows you to see the fruits of your labour on the browser the second…<\/p>\n","protected":false},"author":2,"featured_media":790,"parent":218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/open-source-software.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-789","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/comments?post=789"}],"version-history":[{"count":2,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/789\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/789\/revisions\/794"}],"up":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media\/790"}],"wp:attachment":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media?parent=789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}