feat: playground typescript

playground/pages/index.vue

@@ -1,8 +1,8 @@
-<script setup>
+<script setup lang="ts">
 const story = await useAsyncStoryblok("vue", {
   version: "draft",
   language: "en",
-  resolve_relations: ["popular-articles.articles"]
+  resolve_relations: "popular-articles.articles"
 });
 const richText = computed(() => renderRichText(story.value.content.richText));
 </script>

playground/pages/test.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const story = await useStoryblok("vue/test", { version: "draft" });
 </script>
 

playground/pages/vcalong.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lant="ts">
 const story = ref(null);
 
 onMounted(async () => {

playground/storyblok/sub/Feature.vue

@@ -1,9 +1,14 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
 <template>
   <div v-editable="blok" class="py-2" data-test="feature">
     <h1 class="text-lg">{{ blok.name }}</h1>
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/storyblok/sub/Grid.vue

@@ -1,11 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
 <template>
   <div v-editable="blok" class="flex py-8 mb-6" data-test="grid">
-    <div v-for="blok in blok.columns" :key="blok._uid" class="flex-auto px-6">
-      <StoryblokComponent :blok="blok" />
+    <div
+      v-for="subBlok in blok.columns"
+      :key="subBlok._uid"
+      class="flex-auto px-6"
+    >
+      <StoryblokComponent :blok="subBlok" />
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/storyblok/sub/Page.vue

@@ -1,14 +1,19 @@
+<script setup>
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
 <template>
   <div v-editable="blok" class="px-6" data-test="page">
     <component
-      :is="blok.component"
-      v-for="blok in blok.body"
-      :key="blok._uid"
-      :blok="blok"
+      :is="subBlok.component"
+      v-for="subBlok in blok.body"
+      :key="subBlok._uid"
+      :blok="subBlok"
     />
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/storyblok/sub/Teaser.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
 <template>
   <div
     v-editable="blok"
@@ -8,7 +17,3 @@
     {{ blok.headline }}
   </div>
 </template>
-
-<script setup>
-defineProps({ blok: Object });
-</script>

playground/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    // https://v3.nuxtjs.org/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json",
+    "compilerOptions": {
+      "jsx": "preserve",
+      "paths": {
+        "@/*": ["src/*"]
+      },
+    },
+    "exclude": ["node_modules", "dist"]
+}