Not sure what I’m doing wrong here. I have an existing VitePress project. I opened it in Vue Designer and followed the configuration dialog. Everything is now configured according to the panel. In VSCode, I can see the notification that I am connected to Pinegrow. I’m starting the dev-server and can see my project home page at localhost:5173. But, I can’t get a connection in Vue Designer. I checked out the troubleshooting page and none of those circumstances apply. Any pointers? I can get the boilerplate projects to connect (although I think the cloning of the pinia docs is broken).
Cheers
Bob
Hi Rob,
I’m assuming your project is a Vitepress one and not a Vuepress one (as mentioned in the title of your post).
Unlike Nuxt which is a stable release, Vitepress just came out of beta, and is in rc status, so their setup & APIs can change, so we might have to make it work at our end for now.
Back in Feb, Vitepress team dropped merging a vite.config.ts config with vitepress’s config (at /.vitepress/config.ts), and Evan advised, that we should use the “vite” parameter in /.vitepress/config.ts - Latest version of VitePress is not respecting `vite.config.ts` · Issue #1939 · vuejs/vitepress · GitHub.
But, based on my conversation with Vitepress team 3 days ago (configFile parameter to specify vite.config.ts path like in Vuepress-next · Issue #2743 · vuejs/vitepress · GitHub), looks like the merging is back, and they suggest having vite.config.ts side-by-side with .vitepress folder (in sync with our config panel instructions).
Are you able to share your config panel, with the first section expanded, that lists the paths required to troubleshoot. Pinia-docs looks like this at my end. It is using vitepress beta.5, when vite config got automatically merged when it was in the docs folder.
Also, is your a mono-repo? Did you create a pinegrow.config.cjs file? Can you share that as well.
There is another Vitepress sample app (Vite/Tailwindcss combo) which is the Vue.js official blog. In that, you can notice that the liveDesigner is directly added to the config.ts.
Try these two options, and let me know how you go:
- Try updating vitepress to the latest
rcas per Divyansh’s (brc-dd) suggestion, so that our instructions in the config panel works as expected. (or) - Move your liveDesigner config into the
.vitepress/config.tslike below. Delete vite.config.ts file if it was created only to add our liveDesigner. configPath in pinegrow.config.cjs has to be amended to point to this config.ts file.
Thanks for the note that cloning was broken. It could be because, I forgot to set the two forks as a “template” on github. They clone fine now, please let me know if you experience the issue again.
Thanks!
@RobM , I followed the official docs of Vitepress, and put together a template
You can compare your repo with this to see the difference. I have also added tailwindcss, its styles do conflict with the default styles that comes with vitepress scaffolding.
Clone, npm install, npm run dev, and in Vue Designer, open the SampleCard.vue file from the project panel.
2 Likes
So, I tried replicating the setup of the repo you shared. Here is my config panel
The big difference is that I’m not using typescript. I’m not able to start the dev server after reconfiguration with the following stack trace:
I think I’m doing something dumb, but my brain still doesn’t have all of the parts of VitePress clicked into my head, yet. Thoughts?
Cheers,
Bob
What is your vitepress version? It should be visible in the config panel. Also, can you show me the liveDesigner section in ur vite config file
Typescript or not shouldn’t matter.
For eg, my config looks like this:
And the versions I’m using are:
I’m using rc.4
Here is my entire vite.config.js file from the docs folder:
import { defineConfig } from 'vite'
// import Vue from '@vitejs/plugin-vue'
import { liveDesigner } from '@pinegrow/vite-plugin'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
plugins: [
liveDesigner({})
],
resolve: {
alias: [
{
find: /^.*\/VPNavBar\.vue$/,
replacement: fileURLToPath(
new URL('./components/AposNavBar.vue', import.meta.url)
)
},
{
find: /^.*\/VPSidebar\.vue$/,
replacement: fileURLToPath(
new URL('./components/AposSidebar.vue', import.meta.url)
)
},
{
find: /^.*\/VPSidebarItem\.vue$/,
replacement: fileURLToPath(
new URL('./components/AposSidebarItem.vue', import.meta.url)
)
},
{
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~': fileURLToPath(new URL('./src', import.meta.url)),
'~~': fileURLToPath(new URL('./', import.meta.url)),
}
]
},
});
Just in case it is useful/informative, here is my package.json deps:
"dependencies": {
"eslint": "^8.44.0",
"eslint-config-apostrophe": "^4.0.0",
"eslint-config-standard": "^17.1.0",
"stylelint": "^15.10.1",
"stylelint-config-apostrophe": "^3.0.0",
"vitepress-plugin-pagefind": "^0.2.4",
"vue": "^3.3.4",
"vue-router": "^4.2.3"
},
"devDependencies": {
"@pinegrow/vite-plugin": "^3.0.8",
"@vitejs/plugin-vue": "^4.2.3",
"sitemap": "^7.1.1",
"stylelint-plugin-stylus": "^0.18.0",
"unplugin-vue-components": "^0.25.1",
"vitepress": "^1.0.0-rc.4",
"vitepress-plugin-search": "^1.0.4-alpha.20"
}
I have my doubts if your usage is correct (I will double-check this). I believe you might have to either stick to an object, or an array of objects (where each object must be find/replacement combo)
You might have to change the last object into find-replacement format like this:
{
find: "@",
replacement: fileURLToPath(new URL('./src', import.meta.url)),
},
I would have expected Vite to identify if it was problem and throw an error. But it didn’t. I will patch our vite-plugin to handle this issue, as we use the aliases a lot inside Vue Designer when you are working on your components.
Can your try and let me know. Thanks a lot for the info, it’s very helpful in making our vite-plugin more stable.
Even if you don’t use typescript, its very helpful to have your config files as .ts files, as this would have got displayed as a type anomoly like this (this is what I see) if you were using an editor like vs code.
Also, I will improve our instructions in our config panel, as this is clearly becoz of copying those three aliases from the config panel.
Thanks!
Script Kiddie mistake! Up and running (sort of) now. I have a connection to the dev server, but I’m having some issues dealing with getting components open to edit. Not sure if it is because I’m working with pages that are located in the main vitepress pkg in node_modules?
With Vitepress, the components are generally inside .vitepress/theme folder. So, you have to manually open it from that folder.
In the repo I created yesterday, try opening the SampleCard.vue from inside the .vitepress/theme/components folder. And in the page tree, click the title node “SampleCard.vue” to navigate to it child component.
Also, in this repo, remove the line that extends nuxt tsconfig.json from tsconfig.json file. You can re-clone my repo, I updated it
Now I see what was happening. I had relocated my config aliases to vite.config.js in the root directory. This changed the path to my components. I didn’t see that it had thrown an error until I went back over into VSCode. Still getting used to Vue Designer!
Yeah when in doubt, you can close Vue Designer (the vite plugin won’t be active in Vite’s plugin pipeline anymore), and test it out in an external browser.
Alternatively, you can have our browser devtools open via the “Vue” menu, which should log any errors on the page
1 Like
Steep learning curve, but very powerful!
Vitepress is the tricky one here, I will improve our instructions and have more templates in place.
If you were working with Vite, iles or Nuxt, they follow a standard common folder structure like inside src, components, pages & layouts folders, so very easy and smooth to work in Vue Designer.
Vitepress has this weird (personal opinion) .vitepress folder… and… I think they aim for absolute zero-config for anyone trying to use it for documentation with their default theme. But, when it comes to theme customisation, it becomes tricky…
I completely agree. One of our engineers was complaining that it seems like they don’t want you to customize. Given the number of documentation sites out there that look almost identical, I would be inclined to agree! Not sure why they went down that route.
1 Like
I have patched @pinegrow/vite-plugin to skip any incorrect aliases, and let Vite take care throwing the error. You can install the latest patch as
npm install -D @pinegrow/vite-plugin@latest
Meanwhile, @RobM, if it was a Vuepress to Vitepress migration, I would suggest its best to do it from Vs Code, and once you have a like-for-like functioning one in Vitepress, then you could employ Vue Designer to visually design your components/customize the layout.
Hi @RobM,
Our Vue Designer update v1.11 (from yesterday) includes two additional sample Vitepress apps.
The first one has a custom project setup where I have moved the files from the .vitepress into a familiar folder structure. Custom theme goes into the src folder, and config is moved into a vitepress.config.ts in the project root.
The second one sticks to the standard vitepress style project setup, where everything is within the .vitepress folder.
Note, there are some bugs I have raised with Vitepress RC in their repo, please track them here, I’m sure they will be fixed soon.
- srcDir not working · Issue #2806 · vuejs/vitepress · GitHub
- Docs: more information when using a custom theme · vuejs/vitepress · Discussion #2854 · GitHub (I didn’t raised this one, but relevant to custom theme)
In fact, I used the “custom project setup” one in my first course of the “Learn with Vue Designer” series, where I convert an Vue Iles app into a Vitepress one in the final two bonus sections. Hope you find this helpful.
Thanks for the update! We are almost ready to release our Vitpress site and we are constantly getting little surprises. We also feel that the error logging that you get in dev doesn’t prepare you for errors in production. In dev, everything seems to be logged as info and in prod the same thing throws a breaking error. I’m likely going to open a few tickets on their repo myself.
1 Like