examples: add vue-content-loader (#317)

examples/with-vue-content-loader/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-with-vue-content-loader",
+  "private": true,
+  "devDependencies": {
+    "nuxt3": "latest",
+    "vue-content-loader": "^2.0.0"
+  },
+  "scripts": {
+    "dev": "nu dev",
+    "build": "nu build",
+    "start": "node .output/server"
+  }
+}

examples/with-vue-content-loader/pages/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="profile">
+    <ContentLoader v-if="pending" width="400" height="60">
+      <rect
+        x="70"
+        y="15"
+        rx="4"
+        ry="4"
+        width="117"
+        height="6.4"
+      />
+      <rect
+        x="70"
+        y="35"
+        rx="3"
+        ry="3"
+        width="85"
+        height="6.4"
+      />
+      <circle cx="30" cy="30" r="30" />
+    </ContentLoader>
+    <div v-else>
+      <img :src="data.avatar" height="55" width="55">
+      <div>
+        {{ data.text }}
+        <br>
+        {{ data.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ContentLoader } from 'vue-content-loader'
+import { defineNuxtComponent, asyncData } from '@nuxt/app'
+
+export default defineNuxtComponent({
+  components: { ContentLoader },
+  setup () {
+    const { data, pending } = asyncData(
+      'time',
+      () =>
+        new Promise(resolve =>
+          setTimeout(
+            () =>
+              resolve({
+                text: 'finally done',
+                avatar:
+                  'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80'
+              }),
+            2500
+          )
+        ),
+      { defer: true, server: false }
+    )
+
+    return {
+      data,
+      pending
+    }
+  }
+})
+</script>
+
+<style>
+.profile {
+  width: 400px;
+  height: 60px;
+}
+.profile img {
+  border-radius: 50%;
+}
+.profile > div {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+</style>

yarn.lock

@@ -6217,6 +6217,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-with-vue-content-loader@workspace:examples/with-vue-content-loader":
+  version: 0.0.0-use.local
+  resolution: "example-with-vue-content-loader@workspace:examples/with-vue-content-loader"
+  dependencies:
+    nuxt3: latest
+    vue-content-loader: ^2.0.0
+  languageName: unknown
+  linkType: soft
+
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -13605,6 +13614,15 @@ typescript@^4.3.5:
   languageName: node
   linkType: hard
 
+"vue-content-loader@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "vue-content-loader@npm:2.0.0"
+  peerDependencies:
+    vue: ^3
+  checksum: 2d82352f1c1c456267bd479577d89f1bcf9bf317d6e41f313923a5ab3788ff0e7aefb7e7f31158d8121f2bbe865224c86696cd97ac36be3a2c5f3bfe5e7d30de
+  languageName: node
+  linkType: hard
+
 "vue-eslint-parser@npm:^7.6.0":
   version: 7.6.0
   resolution: "vue-eslint-parser@npm:7.6.0"