vue-code-block/src/documentation/sections/UsageSection.vue at main · webdevnerdstuff/vue-code-block · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<template>
	<v-row>
		<v-col
			id="usage"
			cols="12"
		>
			<h2 :class="classes.h2">
				<a
					:class="classes.headerA"
					href="#usage"
				>#</a>
				Usage
			</h2>

			<v-row>
				<v-col cols="12">
					<VCodeBlock
						:code="usageGlobalPlugin"
						:highlightjs="selectedLibrary.id === 'highlightjs'"
						lang="javascript"
						:prismjs="selectedLibrary.id === 'prismjs'"
						:theme="selectedTheme"
					>
						<template #label>
							Global Plugin Registration
							<br>
							<i>Global options have a higher precedence and will override local props</i>
						</template>
					</VCodeBlock>
				</v-col>
			</v-row>

			<v-row>
				<v-col cols="12">
					<VCodeBlock
						:code="usageGlobalComponent"
						:highlightjs="selectedLibrary.id === 'highlightjs'"
						label="Global Component Registration"
						lang="javascript"
						:prismjs="selectedLibrary.id === 'prismjs'"
					/>
				</v-col>
			</v-row>

			<v-row>
				<v-col cols="12">
					<VCodeBlock
						:code="usageIndividual"
						:highlightjs="selectedLibrary.id === 'highlightjs'"
						label="Local Registration"
						lang="html"
						:prismjs="selectedLibrary.id === 'prismjs'"
					/>
				</v-col>
			</v-row>
		</v-col>
	</v-row>
</template>

<script setup>
const classes = inject('classes');
const selectedLibrary = inject('selectedLibrary');
const selectedTheme = inject('selectedTheme');

const usageGlobalPlugin = `import { createApp } from 'vue';
import App from './App.vue';
import { createVCodeBlock } from '@wdns/vue-code-block';

const VCodeBlock = createVCodeBlock({
  // options
});

const app = createApp(App);

app.use(VCodeBlock);

app.mount('#app');`;

const usageGlobalComponent = `import { createApp } from 'vue';
import App from './App.vue';
import { VCodeBlock } from '@wdns/vue-code-block';

const app = createApp(App);

app.component('VCodeBlock', VCodeBlock);

app.mount('#app');`;

const usageIndividual = `<template>
  <VCodeBlock
    :code="code"
    highlightjs
    label="Hello World"
    lang="javascript"
    theme="neon-bunny"
  />
</template>

\<script setup\>
  import VCodeBlock from '@wdns/vue-code-block';

  const code = ref(\`const foo = 'bar';\`);
\</script\>`;
</script>