@vuetify/vue-repl 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,61 @@
1
+ # @vue/repl
2
+
3
+ Vue SFC REPL as a Vue 3 component.
4
+
5
+ ## Simple Usage
6
+
7
+ ```vue
8
+ <script setup>
9
+ import { Repl } from '@vue/repl'
10
+ import '@vue/repl/style.css'
11
+ </script>
12
+
13
+ <template>
14
+ <Repl />
15
+ </template>
16
+ ```
17
+
18
+ ## Advanced Usage
19
+
20
+ ```vue
21
+ <script setup>
22
+ import { watchEffect } from 'vue'
23
+ import { Repl, ReplStore } from '@vue/repl'
24
+
25
+ // retrieve some configuration options from the URL
26
+ const query = new URLSearchParams(location.search)
27
+
28
+ const store = new ReplStore({
29
+ // initialize repl with previously serialized state
30
+ serializedState: location.hash.slice(1),
31
+
32
+ // starts on the output pane (mobile only) if the URL has a showOutput query
33
+ showOutput: query.has('showOutput'),
34
+ // starts on a different tab on the output pane if the URL has a outputMode query
35
+ // and default to the "preview" tab
36
+ outputMode: (query.get('outputMode') || 'preview'),
37
+
38
+ // specify the default URL to import Vue runtime from in the sandbox
39
+ // default is the CDN link from unpkg.com with version matching Vue's version
40
+ // from peerDependency
41
+ defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js'
42
+ })
43
+
44
+ // persist state to URL hash
45
+ watchEffect(() => history.replaceState({}, '', store.serialize()))
46
+
47
+ // pre-set import map
48
+ store.setImportMap({
49
+ imports: {
50
+ myLib: 'cdn link to esm build of myLib'
51
+ }
52
+ })
53
+
54
+ // use a specific version of Vue
55
+ store.setVueVersion('3.2.8')
56
+ </script>
57
+
58
+ <template>
59
+ <Repl :store="store" :showCompileOutput="true" />
60
+ </template>
61
+ ```
@@ -0,0 +1 @@
1
+ module.exports = {}