arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 03:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: put codeblocks in variables

Browse Source
This commit is contained in:
Benjamin Canac
2022-01-21 15:49:48 +01:00
parent 71371ac34e
commit 3ee3898c03
1 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/pages/index.vue
View File

@@ -17,32 +17,19 @@
</h2> </h2>
<pre class="u-bg-gray-900 rounded-md u-text-white px-4"> <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm"> <code class="text-sm" v-html="code1" />
yarn add --dev @nuxthq/ui</code>
</pre> </pre>
<p>Then, register the module in your `nuxt.config.js`:</p> <p>Then, register the module in your `nuxt.config.js`:</p>
<pre class="u-bg-gray-900 rounded-md u-text-white px-4"> <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm"> <code class="text-sm" v-html="code2" />
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: [
'@nuxthq/ui'
]
})</code>
</pre> </pre>
<p>If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:</p> <p>If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:</p>
<pre class="u-bg-gray-900 rounded-md u-text-white px-4"> <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm"> <code class="text-sm" v-html="code3" />
{
"devDependencies": {
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
}
}</code>
</pre> </pre>
<h2 class="font-bold text-2xl u-text-gray-900"> <h2 class="font-bold text-2xl u-text-gray-900">
@@ -62,17 +49,7 @@ export default defineNuxtConfig({
</p> </p>
<pre class="u-bg-gray-900 rounded-md u-text-white px-4"> <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm"> <code class="text-sm" v-html="code4" />
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: [
'@nuxthq/ui'
],
ui: {
prefix: 'tw'
}
})</code>
</pre> </pre>
<p>- `colors.primary`</p> <p>- `colors.primary`</p>
@@ -84,19 +61,7 @@ export default defineNuxtConfig({
</p> </p>
<pre class="u-bg-gray-900 rounded-md u-text-white px-4"> <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
<code class="text-sm"> <code class="text-sm" v-html="code5" />
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: [
'@nuxthq/ui'
],
ui: {
colors: {
primary: 'blue'
}
}
})</code>
</pre> </pre>
<p>- `colors.gray`</p> <p>- `colors.gray`</p>
@@ -120,3 +85,44 @@ export default defineNuxtConfig({
<p>Extend UnoCSS theme: https://github.com/antfu/unocss#extend-theme.</p> <p>Extend UnoCSS theme: https://github.com/antfu/unocss#extend-theme.</p>
</div> </div>
</template> </template>
<script setup>
const code1 = `
yarn add --dev @nuxthq/ui`
const code2 = `
import { defineNuxtConfig } from 'nuxt3'
defineNuxtConfig({
buildModules: [
'@nuxthq/ui'
]
})`
const code3 = `
{
"devDependencies": {
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
}
}`
const code4 = `
import { defineNuxtConfig } from 'nuxt3'
defineNuxtConfig({
ui: {
prefix: 'tw'
}
})`
const code5 = `
import { defineNuxtConfig } from 'nuxt3'
defineNuxtConfig({
ui: {
colors: {
primary: 'blue'
}
}
})`
</script>