Hi, I would like to use vue designer for vite vanilla-js website to visually edit tailwind css components.
I use alpine.js so I don’t need vue.
It looks like it is obligatory to use Vue in vue designer.
Can I use vue designer without vue (just vite)? If yes, please let me know how? I have 6 more days of trial.
Thank you for any reply!
Hi @MilanK,
Do you have a sample project of your setup? I’m curious to understand how are you able to use “components” without using one of the javascript frameworks like Vue? Are you referring to alpinejs components (or) web components (or) tailwindcss components defined using @layer?
Thanks for reply @TechAkayy yes I’m referring to tailwind/alpinejs components. Vue is just overkill for what I need.
How are you using Vite in your setup? In library mode to compile any javascript? Is there any public repo like your setup that I could test?
Pinegrow for html projects, Vue for vue projects.
If your pages are .html files, then you can use Pinegrow Web Editor instead of Vue Designer. In fact Vue Designer is built on top of the Pinegrow Web Editor platform.
Here are two sample html projects that uses Vite to JIT compile tailwindcss (similar to using tailwind-cli or postcss-cli) & a little bit javascript.
The javascript is in fact alpinejs which is seperated into a separate js module file, so that it doesn’t cloud the html template, and it’s easy to maintain. I haven’t used alpinejs or alpinejs components much, @adamslowe might be able to help with any questions related to alpinejs 
You can download these repositories, install the dependencies (npm install), start the dev-server (npm run dev), open the project in Pinegrow (take a free trial if you don’t use Pinegrow already), and you can work on your html files visually.
- A fork from this guide that used the legacy tailwind v1 - The complete guide to customizing a Tailwind CSS theme -
- Uses one of the pinegrow tailwind starter template
I guess these samples could help you to do a comparative analysis with your setup.
1 Like
Thank you so much @TechAkayy somehow I knew my question was a bit stupid… Can I use vue designer without vue… I was just reading about vue designer using vite and assumed this is the right way. So I need to install Pinegrow Web Editor. Thanks again for your time and your effort !!!
Yes, Pinegrow Web Editor is a separate application and you can install it separately.
Vue Designer is optimised to work on Vue component files and requires Vue & its vite plugin to chain and support visual designing with HMR. It also uses certain settings from vite config file to automatically apply some default settings in the application.
But when working on html files, its way simpler as it doesn’t require compilation, there is no HMR involved (at least not without special code & handlers), so Vite can simply be used to compile some assets (lib mode) like tailwindcss, javascript modules etc used in the html pages. So, Pinegrow Web Editor will be the best tool for such use cases.
Thank you again @TechAkayy I installed Pinegrow Web Editor and I’m using your example cute-tailwind-vite, which is the perfect barebone example for what I need. VIte.config.js is pretty complicated, but I’ll digest it. Pinegrow Web Editor is (almost) perfect for visually designing my idea with Tailwind.
I have only one problem: I added capacitor in the mix, because I would like to publish to android and ios. But when I try to add android ($ npx cap add android) I get error:
× copy android - failed!
[error] The web assets directory (.\dist) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
Can you please tell me how can I add index.html to dist folder (without breaking vite build process)?
I know that question is not Pinegrow related, but hopefully you can help me.
I haven’t used capacitor, but if you can push your cute-tailwind repo to github with the additional capacitor installs and any config, I can sure have a look.
Thank you @TechAkayy I forked example to GitHub - kosirm/cute-tailwind-vite
I just added and initialized capacitor (Capacitor documentation):
npm i @capacitor/core
npm i -D @capacitor/cli
npx cap init
npm i @capacitor/android @capacitor/ios
but then I got error when I want to initialize android:
npx cap add android
npx cap add ios
Hi @MilanK,
It does require some vite hooks skill, and gets a little complex. I will bundle and publish the whole thing into our vite plugin, so it’s easy to use for the end user with simple configuration.
Give the below a shot, and let me know how you go!
Replace the empty plugins array at the top of your vite config
plugins: [
//...
],
with a custom vite plugin like this:
plugins: [
//...
{
name: 'custom-vite-plugin',
config: (config, {command, mode}) => {
if (process.env.NODE_ENV === 'production') {
Object.defineProperty(config.build.rollupOptions, 'input', {
get: function () {
return {
main: fileURLToPath(new URL('./index.html', import.meta.url)),
// introduction: fileURLToPath(new URL('./pages/introduction.html', import.meta.url)),
// blog: fileURLToPath(new URL('./pages/blog.html', import.meta.url)),
}
},
})
if (config.build.rollupOptions?.output) {
delete config.build.rollupOptions.output
}
config.build.minify = true
config.build.cssMinify = true
config.build.emptyOutDir = true
if (config.build.lib) {
delete config.build.lib
}
}
},
// configResolved: (resolvedConfig) => {
// console.log(resolvedConfig)
// },
transform: (code, id) => {
if (process.env.NODE_ENV === 'production') {
if (id.endsWith('.html')) {
code = code.replace(
/<script(.*?)src="dist\/main.js"(.*?)><\/script>/,
`<script type="module" src="src/main.js"></script>`
)
code = code.replace(
/<link(.*?)href="dist\/assets\/css\/output.css"(.*?)\/>/,
''
)
}
return {
code,
}
}
},
},
],
1 Like
Thank you so much @TechAkayy I’m in the car, as soon as I get home to my laptop, I’ll try it and let you know how it works
1 Like
Just got home, your solution works perfectly for me! Thank you a million times!!!
1 Like