Code smarter, not harder
Developing WordPress plugins can be a time-consuming task, especially when dealing with heavy dependencies and slow build processes. However, there is a way to boost your development workflow and write code smarter, not harder – with the help of Vite.
What is Vite?
Vite is a build tool for modern web development. It is designed to be fast and lightweight, providing an efficient development experience for front-end projects. Vite is powered by native ES Modules, which allows for lightning-fast build times and near-instant hot module replacement.
Integrating Vite with WordPress plugins
Integrating Vite with WordPress plugins can significantly enhance your development workflow. By using Vite, you can benefit from instant start-up times, fast HMR (Hot Module Replacement), and an efficient build process without the need for complex configuration files.
How to use Vite with WordPress plugins
To use Vite with WordPress plugins, you can follow these simple steps:
- Install Vite using npm or yarn:
- Create a new Vite project:
- Integrate Vite with your WordPress plugin by setting up a separate Vite project that will handle the front-end assets. You can then use Vite’s build output to enqueue your assets in your WordPress plugin.
npm install -g create-vite
create-vite my-vite-app --template vite+vue
Benefits of using Vite with WordPress plugins
By integrating Vite with your WordPress plugin, you can benefit from:
- Lightning-fast build times
- Near-instant hot module replacement
- Efficient development workflow
- Modern front-end development features
Conclusion
Incorporating Vite into your WordPress plugin development workflow can significantly improve your productivity and overall development experience. By leveraging Vite’s speed and efficiency, you can code smarter, not harder, and enjoy a more seamless and enjoyable development process.
Hi Guys! Please check out an important aspect that I've forgot to mention in the video: Since Vite works with ES modules, the scripts should be loaded with `type="module"` attribute even in the production mode. The change has been already reflected in the material docs: https://tentyp.dev/blog/wordpress/vite/#how-to-enqueue-assets-generated-by-vite
Big thanks to @jantack7186 for noticing this 🙏 You can also check they nice thoughts in the comments above.
I can't seem to manage to make it work when running "yarn dev" so that it works with HMR. I have a plugin instead of a theme like in your case but I don't understand where and what to enqueue when running in dev mode. "yarn build" just enqueues the files from the manifest and that's it I understand that part but I don't know how to make "yarn dev" work. Any additional info would be much appreciated. Great content by the way.
Amazing content and very useful and it’s really inspiring to see your elegant code 😮
Cześć, zastosowałem Twój kod do pluginu wp, ale nie działa mi wstrzykiwanie zmian, w terminalu wykrywa zmiany i jak sprawdzam kod źródłowy skryptu to też widać ze zmienił się kod skryptu, ale na stronie nie ma zmian, dopiero po odświeżeniu aplikuje zmiany. Możesz podpowiedzieć w czym jest problem lub masz jakiś przykład?
Very helpful thanks
It is almost impossible to follow and therefore understand the concept whilst getting disturbed all the time by swoosh-, pan-, switching-animations and all that unnecessary noice. Those kind of videos are not about your editing skills and fancy effects, they're about the valuable content. And if you distract by all that animation, nobody understands what you trying to teach.
Petarda odcinek, poleciał sub 🙂 czekam na więcej filmików apropos Wp, vite czy nawet sage / bedrocka 😀
Vite 5 has been released! https://vitejs.dev/blog/announcing-vite5
This material uses 4.4.9 version, but I'll check the latest one and let you know what are the results. Stay tuned 🫡
The video and the text on the website look very helpful. At the end of the text you ask to rate 1. the technical and 2. the visual quality. I am missing a third category here: linguistic eloquence. You have done a good job in all three areas. Compliments and Thanks!
Hi Guys! I think that the results are really great, but I'm wondering what you think too. Just check out the latest video that I've made and let me know what do you think about this topic! 🫡 🎉