Live Preview for Vue #4970
Replies: 5 comments 17 replies
-
You are the first I know of offering to work on this. We would gladly accept your offer! |
Beta Was this translation helpful? Give feedback.
-
|
Sure thing! I'm glad to contribute. I'll start working on it later today |
Beta Was this translation helpful? Give feedback.
-
|
Hello @DanRibbens! I also published it to NPM as However, I need a bit of guidance from you guys if you would like to make it an official Payload plugin... I didn't know how to setup the I have no experience with SWC nor monorepos, so I'm not sure if there's something I should setup differently. The hook is identical in nature to the official React hook, just with Vue syntax. It's also pure Typescript and doesn't require any Vue compilers. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @DanRibbens! Quick question about the tests… I don’t see anything in the React tests that actually check if the data changes are displayed on the Live Preview iframe, it basically tests that So my question is: Is it relevant to add a Vue test? You created a full Next app with pages, posts, blocks, rich texts, etc… Do I have to recreate the complete app on Vue? I don’t know if it is relevant since if it works on React, it works on Vue because there’s no Vue-specific logic happening here. At the end of the day |
Beta Was this translation helpful? Give feedback.
-
Okay, I hadn't looked that closely at the existing e2e tests for live-preview and I wrongly assumed that it had this coverage and we would want the same. On the e2e side I see your point, the tests would be the same whether Vue or React clients. Could you open the PR with everything except the tests? I would like to see what it looks like and maybe we just need an integration testing on the functions instead of building up the vue app and testing that. Since we would have to also maintain the vue app in the test repo, we should avoid that unless needed for stability. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Sure! I will finish writing the docs for it and then submit the PR. I know your main focus is on React, which is great. But if you ever need help maintaining Vue plugins or integrations for Payload (such as this hook), I'm happy to contribute. |
Beta Was this translation helpful? Give feedback.
-
|
You are the best! I think a Vue frontend template could be very popular and if we were smart that could be used for e2e in the |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your kind words! That sounds great! I can certainly try to recreate the |
Beta Was this translation helpful? Give feedback.
-
|
The PR has been submited #4987 Please let me know if there's anything else missing. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
I merged the PR and it will be released next week. Thank you @ChrisGV04 for this feature! |
Beta Was this translation helpful? Give feedback.
-
|
Glad to help! |
Beta Was this translation helpful? Give feedback.
-
|
I cherry-picked your commit and updated the package to ESM for the PR against beta: #5933 so that it can be included going forward. We didn't add a test frontend for this. I wouldn't say it is required, but could be a nice to have. If you decide to add it you could skip v2 and just do it on v3, currently |
Beta Was this translation helpful? Give feedback.
-
|
I agree on adding tests. I would love to see how you guys would test the React live preview hook so I can write a similar test for the Vue hook. |
Beta Was this translation helpful? Give feedback.
-
|
Sure, we have a next frontend app in the live-preview test suite: https://github.com/payloadcms/payload/tree/main/test/live-preview. I would use the same config and replace all the Next app with Nuxt and replace the React components with Vue. It probably doesn't need to be nuxt if you just want to make it work as a vanilla Vue app that would be fine too. Alternatively you could just add unit tests to your component tests and avoid the work of making the full e2e. Does that make sense? |
Beta Was this translation helpful? Give feedback.
-
@ChrisGV04 have you had a chance to look at this? Even a simplified and barebones approach would be acceptable. As it stands we don't have a good way to release the package and ensure functionality in order to support it. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @DanRibbens ! Sorry for the delay. I have been very busy lately. I took a look at the current tests that exist for live preview and again I could not find any tests for the If I were to write a similar test, it would only ensure the Vue app runs, not that the |
Beta Was this translation helpful? Give feedback.
-
I love the power of Live Preview. This feature alone has convinced some of my customers to switch from WordPress and other integrated CMS's. However, I work with Nuxt for Vue for my front-end development.
I see that the docs for Live Preview mention that you plan to officially support other frameworks, such as Vue.
Are you planning to implement this feature soon? Because I checked out the source code for the React hook and it seems straight forward to implement, so I would be willing to build it for Vue if you like.
Beta Was this translation helpful? Give feedback.
All reactions