koca / vue-prism-editor

A dead simple code editor with syntax highlighting and line numbers. 3kb/gz
https://prism-editor.netlify.com
MIT License
752 stars 85 forks source link

Vue 3 upgrade #90

Open zafaralam opened 4 years ago

zafaralam commented 4 years ago

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

Thanks for the great component 😄

koca commented 4 years ago

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 🎉

syuilo commented 4 years ago

Great work! Thanks 🎉🎉🎉

atinux commented 4 years ago

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.

koca commented 4 years ago

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 :)

atinux commented 4 years ago

Awesome, that was fast!

wagslane commented 3 years ago

@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

koca commented 3 years ago

@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?

wagslane commented 3 years ago

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

koca commented 3 years ago

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

mesqueeb commented 2 years ago

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

Flamenco commented 6 months ago

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
coreyogburn commented 2 months ago

I'm having a hard time building the alpha for my Vue 3 web app. Between workspaces, lerna/yarn using a mutex flag, and autoprefixer being referenced but unspecified in the dependencies I'm running circles trying to get a UMD prod min version of this script. Has this project been abandoned? Can you put out a pre-built release of the alpha?

EDIT: nevermind needing to build, found one on jsdelivr