docs: use lang="ts" everywhere

This commit is contained in:
Benjamin Canac
2024-02-14 17:41:10 +01:00
parent 300861a49e
commit c488b28c3c
13 changed files with 15 additions and 15 deletions

View File

@@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const route = useRoute() const route = useRoute()
const links = [{ const links = [{

View File

@@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const route = useRoute() const route = useRoute()
const links = [{ const links = [{

View File

@@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const route = useRoute() const route = useRoute()
const links = [ const links = [

View File

@@ -26,7 +26,7 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup lang="ts">
import { useElementSize } from '@vueuse/core' import { useElementSize } from '@vueuse/core'
const el = ref(null) const el = ref(null)

View File

@@ -206,7 +206,7 @@ An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `re
<UCard :ui="ui" /> <UCard :ui="ui" />
</template> </template>
<script setup> <script setup lang="ts">
const ui = /*ui*/ { const ui = /*ui*/ {
background: 'bg-white dark:bg-slate-900' background: 'bg-white dark:bg-slate-900'
} }

View File

@@ -247,7 +247,7 @@ You can easily build a color mode button by using the `useColorMode` composable
#code #code
```vue ```vue
<script setup> <script setup lang="ts">
const colorMode = useColorMode() const colorMode = useColorMode()
const isDark = computed({ const isDark = computed({
get () { get () {

View File

@@ -130,7 +130,7 @@ defineShortcuts({
To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable. To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
```vue ```vue
<script setup> <script setup lang="ts">
const { metaSymbol } = useShortcuts() const { metaSymbol } = useShortcuts()
</script> </script>

View File

@@ -40,7 +40,7 @@ Use the `prevent-close` prop to disable the outside click alongside the `esc` ke
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable. You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
```vue ```vue
<script setup> <script setup lang="ts">
const isOpen = ref(false) const isOpen = ref(false)
defineShortcuts({ defineShortcuts({

View File

@@ -42,7 +42,7 @@ Then, you can use the `useToast` composable to add notifications to your app:
When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`. When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
```vue ```vue
<script setup> <script setup lang="ts">
const toast = useToast() const toast = useToast()
onMounted(() => { onMounted(() => {

View File

@@ -40,7 +40,7 @@ Use the `prevent-close` prop to disable the outside click alongside the `esc` ke
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable. You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
```vue ```vue
<script setup> <script setup lang="ts">
const isOpen = ref(false) const isOpen = ref(false)
defineShortcuts({ defineShortcuts({

View File

@@ -93,7 +93,7 @@ You can specify a default sort for the table through the `sort` prop. It's an ob
This will set the default sort and will work even if no column is set as `sortable`. This will set the default sort and will work even if no column is set as `sortable`.
```vue ```vue
<script setup> <script setup lang="ts">
const sort = ref({ const sort = ref({
column: 'name', column: 'name',
direction: 'desc' direction: 'desc'
@@ -134,7 +134,7 @@ When fetching data from an API, we can take advantage of the [`useFetch`](https:
When doing so, you might want to set the `sort-mode` prop to `manual` to disable the automatic sorting and return the rows as is. When doing so, you might want to set the `sort-mode` prop to `manual` to disable the automatic sorting and return the rows as is.
```vue ```vue
<script setup> <script setup lang="ts">
// Ensure it uses `ref` instead of `reactive`. // Ensure it uses `ref` instead of `reactive`.
const sort = ref({ const sort = ref({
column: 'name', column: 'name',
@@ -338,7 +338,7 @@ excludedProps:
This can be easily used with Nuxt `useAsyncData` composable. This can be easily used with Nuxt `useAsyncData` composable.
```vue ```vue
<script setup> <script setup lang="ts">
const columns = [...] const columns = [...]
const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people')) const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))

View File

@@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const title = 'Playground' const title = 'Playground'
const description = 'Play online with our interactive Nuxt Image playground.' const description = 'Play online with our interactive Nuxt Image playground.'

View File

@@ -1,4 +1,4 @@
<script setup> <script setup lang="ts">
const title = 'Roadmap' const title = 'Roadmap'
const description = 'Discover our Volta board for @nuxt/ui development status.' const description = 'Discover our Volta board for @nuxt/ui development status.'