wheatjs/vueuse-playground

An online playground for VueUse

me

vueuse-playground's Issues

这是哪种技术 感谢

这些是什么东西啊 好奇怪 第一次遇到这种技术 谢谢
是那个windicss吗 去官方看了看好像也不太一样

useScroll is not recognised

Hey - firstly thanks for the playground! It's great.

Trying to import { useScroll } from '@vueuse/core' however I'm getting an import error:

SyntaxError: The requested module '@vueuse/core' does not provide an export named 'useScroll'

repro

Not sure if playground is using an old vueuse version (useScroll released in 6.4.0) ?

Please add Download Option

As a Developer, copy/pasting the (split) code into my Application feels unneccessary cumbersome.

After testing and fumbling with the Playground, besides a share button it would be nice to be able to download the files as well.

The offical Vue playground generates a ZIP with package.json, vite config and a src folder with main.js and and all components.

Request to add a LICENSE file

Hi @wheatjs! Thanks for creating such beautiful vueuse playground! It made getting started and learning Vue and Vueuse exponentially easier for me!

Would you kindly consider adding a license file for this? I wanted to build upon this project for making a front-end for my custom disassembler and assembler project.

Any issues with using the original Vue SFC Playground?

Is there any reason not use the original Vue SFC Playground https://sfc.vuejs.org/# with @vueuse/core, @vueuse/shared and vue-demi added to the import-map.json? It seems to work just fine.

The URL is too long. Is there any way to shorten it

The URL is too long. Is there any way to shorten it？

useIntervalFn not working as expected in playground

I was messing with useIntervalFn in the playground and wasn't able to get it working at all, so I decided to copy the example from the docs, and it doesn't work either.

It worked perfectly fine in a normal vue project however

In the demo below, if you change the interval via the input, it continues changing extremely fast
https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wArJMAAyTACM62wW0mKDwk32ICOJwIRBxiDxwxm1me7C4ZwxXxQPxkcgUvAAwqwIogoH9zKwTCgbthZPlCioZXgwKxkDD5BlobIUAikSAUYMRmMBEJprNhpzubzECTyVSaXSGUzDgBdZhGOgGM1oUAAQTAYEmC3QoFSuoMEFSRBUKgAPGAAHzAYBJOqgg4HdPDbMAHXMGfLlbTZlSHGIhjQFbTafTZjAARUxAoeFYNAMAF4yyA64gG4YR-EQmBEMOQNhSHhSuOp2Ak9xdLKaBx52OJwYp1Ak8hkPPSvAKNIKthkJBrOqR1mWxnS8-K+nSgEEuYe3QjHuyDhgq2SIEeJ5niOdQQNgSBTucx50LA86QHiT4vmmAAKEBoR+wxfv08jvm2BE-t2FD-vOACEdBASBHjwYhyEjtYyBLmBIDEa2ABKKDsS+JakURzxitIRB0LqdTSCoebWCYBw1BwswqAA5AsKkVhJeocNJeZ4gAkuq46NgYFjmApRhKXgqnOjcPJ1IgGlZJJOkySoN6FopykqbZ+LAlQTkzLe0nwNYiCyLBziDioGAqQAEp4XgqYwqlxXQyWqQAmqwVEZfFiAhHlcWyhAeWAMoMgDJDIA1gyAIYMgD2DHlABC8i7AKeUAoYAS5SlKmAAbygC+mipfoVkFyDSZEBYqNFcnaPlESsCp9gjfIY2mEZB5Te5iBGNoxJkmSS22CtukqKhNwpax7EpbRwGyB4KgKdFBnrSZZnaNojiDlmMkvhNHBUDGnVpNFoWIOFvjIBgHnaGSKWg+DkWTCGsHSLoKgUColL2MN2BHGt9YmfYLLMDKBZmMmiAxuQcYgAm64U0Q6ZUNkL61Oq859tgrAji+F7zkE8B9BQe1km4lQwGgVDi8L+085WRghps84AH4qDMh4gC+qSbNI87cOtctpmA86NIbKilAW47zkp-A0FQctcemd4wfEiA6-OAAsmwazmeYmaoRYls72CO8HrvuyOyDWVLHASwLQsAJz7WLsdoN40DBCEMtTng87SBQpucQAsuwkK5ioSYrgYD3FnckAhxWJbM8QWYiZIMjiS5J00EG2CIJhSmDA9XnWWp5BORWPdmP3g-INowAvpXnhoCoALXr4jAvv7iArwAckuK4cJvuNE0WBxAA

Can we test @vueuse/router funtionality?

Want to playaround and find out how useRouteQuery works, but got this.
Not sure how to add import-maps.json.

Whether useMonaco can be a stand-alone package?

This playground is much nicer and more comfortable to use.
Can useMonaco be referenced independently? It would allow more developers to use.

Control styling

Is it possible to remove all the styling from buttons and select controls please?

button {
  text-transform: none;
  background-color: transparent;
  background-image: none
}

Stuff like this is being applied to every button and select and making the UI completely unusable in the preview.

<select>
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
  <option value="test3">Test 3</option>
</select>
<input type="button"value="Add">

Searching for new packages in the InstallPackages component not working

I noticed 500 errors coming from a skypack's api while trying to install @vueuse/integrations.
Not sure if the api is still up.

feature request : open the full preview on a new tab

The current playground viewport is small. I would like to suggest adding a way to allow the user to open the full-preview on a new tab.

Feature Request: Versions Switch for vueuse/core Package

Description

It would be very helpful if the VueUse playground had a versions switch feature for the vueuse/core package. This feature would allow users to easily switch between different versions of the vueuse/core package to test compatibility and behavior in different environments.

Expected Behavior

• Provide a dropdown or toggle switch in the VueUse playground UI.
• Allow users to select different versions of the vueuse/core package.
• Ensure that the selected version is reflected in the playground environment.

if possible, move the compilation step for files to a worker

Feature Request: TypeScript Support

Please add support for TypeScript. ♥