vue-prism-editor icon indicating copy to clipboard operation
vue-prism-editor copied to clipboard

Vue 3 upgrade

Open zafaralam opened this issue 4 years ago • 12 comments

Are there any plans to release an update for the upcoming Vue 3?

Thanks for the great component 😄

zafaralam avatar Aug 29 '20 12:08 zafaralam

Hey guys just released v2.0.0-alpha.1 which supports vue 3.

example vue 3 csb: https://codesandbox.io/s/vue-3-support-for-vue-prism-editor-fm7v5

install:

npm install vue-prism-editor@alpha

or

yarn add vue-prism-editor@alpha

cheers 🎉

koca avatar Oct 16 '20 21:10 koca

Great work! Thanks 🎉🎉🎉

syuilo avatar Oct 17 '20 00:10 syuilo

Nice work @koca

When using with vite, I got this error:

Screenshot 2020-10-21 at 18 36 46

By changing these two lines to

const isWindows = /Win/i.test(navigator.platform);
const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);

It works, but of course will fail if running on SSR, do you have any idea how to fix it since global is not defined with vite and defining it breaks the HMR.

atinux avatar Oct 21 '20 16:10 atinux

thanks @Atinux. Released a new version v2.0.0-alpha.2 for vite support.

I made an example for vite + prismjs + vue-prism-editor usage: vite csb: https://codesandbox.io/s/vite-vue-prism-editor-q9j8p?file=/src/components/CodeEditor.vue

install:

npm install vue-prism-editor@alpha

or

yarn add vue-prism-editor@alpha

If you have any questions let me know :)

koca avatar Oct 21 '20 19:10 koca

Awesome, that was fast!

atinux avatar Oct 22 '20 10:10 atinux

@koca do you plan to add support to vite in the Vue 2 version? I'm stuck on Vue 2 but also really want to use vite haha

wagslane avatar Apr 22 '21 16:04 wagslane

@koca do you plan to add support to vite in the Vue 2 version? I'm stuck on Vue 2 but also really want to use vite haha

Sure, you get the global issue? Or different error?

koca avatar Apr 22 '21 20:04 koca

Yeah, I worked around it by adding

<script>
    const global = globalThis;
  </script>

To my index.html, but it would be nice if a front-end lib didn't depend on Node.js stuff

wagslane avatar Apr 22 '21 20:04 wagslane

Yeah, I worked around it by adding

<script>
    const global = globalThis;
  </script>

To my index.html, but it would be nice if a front-end lib didn't depend on Node.js stuff

Yes I'll change

koca avatar Apr 22 '21 20:04 koca

@koca will it be officially released soon? great job btw!

mesqueeb avatar Nov 03 '22 05:11 mesqueeb

Because this is still alpha, yarn shows v2 as the most current version. It is time to drop the -alpha version.

Screenshot 2024-05-02 at 7 58 57 AM

Flamenco avatar May 02 '24 11:05 Flamenco