diff --git a/docs/components/content/ChangeLog.vue b/docs/components/content/ChangeLog.vue
index 3cb114658..df4be9462 100644
--- a/docs/components/content/ChangeLog.vue
+++ b/docs/components/content/ChangeLog.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <GithubReleases v-slot="{releases}">
+    <GithubReleases v-slot="{ releases }">
       <div v-for="release in releases" :key="release.name" class="release">
         <div class="release-name">
           <h2 class="">
diff --git a/package.json b/package.json
index d54a71dd9..18190b118 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.6.5",
+    "@vueuse/head": "^1.1.26",
     "consola": "^3.2.3",
     "defu": "^6.1.2",
     "destr": "^2.0.0",
diff --git a/playground/shared/components/NavItem.vue b/playground/shared/components/NavItem.vue
index 716c51d19..7da852f66 100644
--- a/playground/shared/components/NavItem.vue
+++ b/playground/shared/components/NavItem.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { NavItem } from '../../../src/runtime/types'
+
 const props = defineProps<{
-  navItem: any
+  navItem: NavItem
 }>()
 const icon = computed(() => {
   if (props.navItem.icon) { return props.navItem.icon }
diff --git a/playground/shared/components/content/MarkdownBetween.vue b/playground/shared/components/content/MarkdownBetween.vue
index b0ddca65e..42cb2aa07 100644
--- a/playground/shared/components/content/MarkdownBetween.vue
+++ b/playground/shared/components/content/MarkdownBetween.vue
@@ -1,7 +1,3 @@
 <template>
-  <ContentSlot :use="$slots.default" unwrap="ul li">
-    <template #between>
-      <br>
-    </template>
-  </ContentSlot>
+  <ContentSlot :use="$slots.default" unwrap="ul li" />
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2862e224a..f9878e5d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   '@nuxt/kit':
     specifier: ^3.6.5
     version: 3.6.5(rollup@3.26.3)
+  '@vueuse/head':
+    specifier: ^1.1.26
+    version: 1.1.26
   consola:
     specifier: ^3.2.3
     version: 3.2.3
@@ -66,7 +69,7 @@ dependencies:
 devDependencies:
   '@nuxt/module-builder':
     specifier: ^0.4.0
-    version: 0.4.0(@nuxt/kit@3.6.5)(nuxi@3.6.4)
+    version: 0.4.0(@nuxt/kit@3.6.5)(nuxi@3.6.5)
   '@nuxt/schema':
     specifier: 3.6.5
     version: 3.6.5(rollup@3.26.3)
@@ -827,11 +830,6 @@ packages:
       eslint-visitor-keys: 3.4.2
     dev: true
 
-  /@eslint-community/regexpp@4.5.1:
-    resolution: {integrity: sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-    dev: true
-
   /@eslint-community/regexpp@4.6.2:
     resolution: {integrity: sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -1005,7 +1003,7 @@ packages:
       - rollup
       - supports-color
 
-  /@nuxt/module-builder@0.4.0(@nuxt/kit@3.6.5)(nuxi@3.6.4):
+  /@nuxt/module-builder@0.4.0(@nuxt/kit@3.6.5)(nuxi@3.6.5):
     resolution: {integrity: sha512-B+UAYgFV1Hkc2ZcD7GaiKZ3SNHhyxFlXzZoBWTc9ulE0Z/+rq6RTa9fNm13BZyGhVhDCl5FN/wF/yYa1O/D2iw==}
     hasBin: true
     peerDependencies:
@@ -1016,7 +1014,7 @@ packages:
       consola: 3.2.3
       mlly: 1.4.0
       mri: 1.2.0
-      nuxi: 3.6.4
+      nuxi: 3.6.5
       pathe: 1.1.1
       unbuild: 1.2.1
     transitivePeerDependencies:
@@ -1715,7 +1713,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.5.1
+      '@eslint-community/regexpp': 4.6.2
       '@typescript-eslint/parser': 5.62.0(eslint@8.46.0)(typescript@5.1.6)
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/type-utils': 5.62.0(eslint@8.46.0)(typescript@5.1.6)
@@ -1831,7 +1829,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       '@typescript-eslint/types': 5.62.0
-      eslint-visitor-keys: 3.4.1
+      eslint-visitor-keys: 3.4.2
     dev: true
 
   /@ungap/structured-clone@1.2.0:
@@ -1843,27 +1841,23 @@ packages:
     dependencies:
       '@unhead/schema': 1.1.32
       '@unhead/shared': 1.1.32
-    dev: true
 
   /@unhead/schema@1.1.32:
     resolution: {integrity: sha512-XxrNazZEO9T+r1ORduy6gnKA9rDzRgxr/p5UEPRM+TZVuM8ZEFzYr2/aE5bMgTCXp20z0pjv/2rewpVSXp4pFQ==}
     dependencies:
       hookable: 5.5.3
       zhead: 2.0.9
-    dev: true
 
   /@unhead/shared@1.1.32:
     resolution: {integrity: sha512-oguyfbwbG4+wNphXQjQ3YrEe4NzabocpTQKNCKdTUPtpK9HYNiI+dffEoSiM3tWcwlG3iYrXj5WvREq3FoACWQ==}
     dependencies:
       '@unhead/schema': 1.1.32
-    dev: true
 
   /@unhead/ssr@1.1.32:
     resolution: {integrity: sha512-3DGh/EvHFuUx9k0M5CN5KmQHEaZMbrwtRlv2aQjicLqeeJGSI+okpRbaEu4A9WWwPmkR0u8FBnv1WCAPMcj3ZA==}
     dependencies:
       '@unhead/schema': 1.1.32
       '@unhead/shared': 1.1.32
-    dev: true
 
   /@unhead/vue@1.1.32(vue@3.3.4):
     resolution: {integrity: sha512-rpQVxgI/crwlC+z8GnfPV6EwVN/kyeVSvEfzJO9VMIdrWMrh6vAV0WNv3v+BFd0bVLiRyNzhvbY76yhmAX4Zvw==}
@@ -1878,7 +1872,6 @@ packages:
       hookable: 5.5.3
       unhead: 1.1.32
       vue: 3.3.4
-    dev: true
 
   /@vercel/nft@0.22.6:
     resolution: {integrity: sha512-gTsFnnT4mGxodr4AUlW3/urY+8JKKB452LwF3m477RFUJTAaDmcz2JqFuInzvdybYIeyIv1sSONEJxsxnbQ5JQ==}
@@ -2046,7 +2039,6 @@ packages:
     dependencies:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/compiler-sfc@3.3.4:
     resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
@@ -2061,14 +2053,12 @@ packages:
       magic-string: 0.30.1
       postcss: 8.4.26
       source-map-js: 1.0.2
-    dev: true
 
   /@vue/compiler-ssr@3.3.4:
     resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
     dependencies:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -2101,20 +2091,17 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.1
-    dev: true
 
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/runtime-core@3.3.4:
     resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
     dependencies:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
-    dev: true
 
   /@vue/runtime-dom@3.3.4:
     resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
@@ -2122,7 +2109,6 @@ packages:
       '@vue/runtime-core': 3.3.4
       '@vue/shared': 3.3.4
       csstype: 3.1.2
-    dev: true
 
   /@vue/server-renderer@3.3.4(vue@3.3.4):
     resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
@@ -2135,11 +2121,24 @@ packages:
       '@vue/compiler-ssr': 3.3.4
       '@vue/shared': 3.3.4
       vue: 3.3.4
-    dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
+  /@vueuse/head@1.1.26:
+    resolution: {integrity: sha512-VUrqvcxKtxt2moKtUa7R/KscnDsNYj5u7HFULLsr84VhWsztzBedxW/8Wh/kTz2+/eMf5gC1KtkZBTFQYOmauQ==}
+    peerDependencies:
+      vue: '>=2.7 || >=3 || ^3.2.45'
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      '@unhead/dom': 1.1.32
+      '@unhead/schema': 1.1.32
+      '@unhead/ssr': 1.1.32
+      '@unhead/vue': 1.1.32(vue@3.3.4)
+    dev: false
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -3234,7 +3233,6 @@ packages:
 
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
-    dev: true
 
   /csvtojson@2.0.10:
     resolution: {integrity: sha512-lUWFxGKyhraKCW8Qghz6Z0f2l/PqB1W3AO0HKJzGIQ5JRSlR651ekJDiGJbBT4sRNNv5ddnSGVEnsxP9XRCVpQ==}
@@ -4031,14 +4029,6 @@ packages:
       estraverse: 4.3.0
     dev: true
 
-  /eslint-scope@7.2.1:
-    resolution: {integrity: sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4074,11 +4064,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-visitor-keys@3.4.1:
-    resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /eslint-visitor-keys@3.4.2:
     resolution: {integrity: sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6570,7 +6555,6 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /nanoid@4.0.2:
     resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
@@ -6804,14 +6788,6 @@ packages:
       boolbase: 1.0.0
     dev: true
 
-  /nuxi@3.6.4:
-    resolution: {integrity: sha512-Bd8scRiNEsBJ+gVumqClZjWTuj+CAMxKFKzrmD76uzGuJBdzK+rxAhRqgB+xby9wv7ONT1mb14an4EmumwpVbg==}
-    engines: {node: ^14.18.0 || >=16.10.0}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /nuxi@3.6.5:
     resolution: {integrity: sha512-4XEXYz71UiWWiKC1/cJCzqRSUEImYRmjcvKpSsBKMU58ALYVSx5KIoas5SwLO8tEKO5BS4DAe4u7MYix7hfuHQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -7701,7 +7677,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -9245,7 +9220,6 @@ packages:
       '@unhead/schema': 1.1.32
       '@unhead/shared': 1.1.32
       hookable: 5.5.3
-    dev: true
 
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
@@ -9915,8 +9889,8 @@ packages:
     dependencies:
       debug: 4.3.4
       eslint: 8.46.0
-      eslint-scope: 7.2.1
-      eslint-visitor-keys: 3.4.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.2
       espree: 9.6.1
       esquery: 1.5.0
       lodash: 4.17.21
@@ -9961,7 +9935,6 @@ packages:
       '@vue/runtime-dom': 3.3.4
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
-    dev: true
 
   /wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
@@ -10203,7 +10176,6 @@ packages:
 
   /zhead@2.0.9:
     resolution: {integrity: sha512-Y3g6EegQc6PVrYXPq2OS7/s27UGVS5Y6NY6SY3XGH4Hg+yQWbQTtWsjCgmpR8kZnYrv8auB54sz+x5FEDrvqzQ==}
-    dev: true
 
   /zip-stream@4.1.0:
     resolution: {integrity: sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==}
diff --git a/src/module.ts b/src/module.ts
index 6cc053f5b..98c835ac6 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -229,6 +229,7 @@ export interface ModuleOptions {
   experimental: {
     clientDB: boolean
     stripQueryParameters: boolean
+    advanceQuery: boolean
   }
 }
 
@@ -293,7 +294,8 @@ export default defineNuxtModule<ModuleOptions>({
     respectPathCase: false,
     experimental: {
       clientDB: false,
-      stripQueryParameters: false
+      stripQueryParameters: false,
+      advanceQuery: false
     }
   },
   async setup (options, nuxt) {
@@ -328,6 +330,7 @@ export default defineNuxtModule<ModuleOptions>({
           if (code.includes('<ContentSlot')) {
             code = code.replace(/<ContentSlot (.*)(:use=['"](\$slots.)?([a-z]*)['"]|use=['"]([a-z]*)['"])/g, '<MDCSlot $1 name="$4"')
             code = code.replace(/<\/ContentSlot>/g, '</MDCSlot>')
+            code = code.replace(/<ContentSlot/g, '<MDCSlot')
             return code
           }
         }
@@ -421,7 +424,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Register composables
     addImports([
-      { name: 'queryContent', as: 'queryContent', from: resolveRuntimeModule('./composables/query') },
+      { name: 'queryContent', as: 'queryContent', from: resolveRuntimeModule(`./${options.experimental.advanceQuery ? '' : 'legacy/'}composables/query`) },
       { name: 'useContentHelpers', as: 'useContentHelpers', from: resolveRuntimeModule('./composables/helpers') },
       { name: 'useContentHead', as: 'useContentHead', from: resolveRuntimeModule('./composables/head') },
       { name: 'useContentPreview', as: 'useContentPreview', from: resolveRuntimeModule('./composables/preview') },
@@ -475,7 +478,7 @@ export default defineNuxtModule<ModuleOptions>({
       filename: 'types/content.d.ts',
       getContents: () => [
         'declare module \'#content/server\' {',
-        `  const serverQueryContent: typeof import('${resolve('./runtime/server')}').serverQueryContent`,
+        `  const serverQueryContent: typeof import('${resolve(options.experimental.advanceQuery ? './runtime/server' : './runtime/legacy/types')}').serverQueryContent`,
         `  const parseContent: typeof import('${resolve('./runtime/server')}').parseContent`,
         '}'
       ].join('\n')
@@ -562,7 +565,11 @@ export default defineNuxtModule<ModuleOptions>({
         { name: 'useContent', as: 'useContent', from: resolveRuntimeModule('./composables/content') }
       ])
 
-      addPlugin(resolveRuntimeModule('./plugins/documentDriven'))
+      addPlugin(resolveRuntimeModule(
+        options.experimental.advanceQuery
+          ? './plugins/documentDriven'
+          : './legacy/plugins/documentDriven'
+      ))
 
       if (options.documentDriven.injectPage) {
         nuxt.options.pages = true
@@ -631,6 +638,7 @@ export default defineNuxtModule<ModuleOptions>({
       integrity: buildIntegrity,
       experimental: {
         stripQueryParameters: options.experimental.stripQueryParameters,
+        advanceQuery: options.experimental.advanceQuery === true,
         clientDB: options.experimental.clientDB && nuxt.options.ssr === false
       },
       respectPathCase: options.respectPathCase ?? false,
@@ -700,7 +708,7 @@ export default defineNuxtModule<ModuleOptions>({
           return true
         })
         await Promise.all(
-          keys.map(async key => await storage.setItem(
+          keys.map(async (key: string) => await storage.setItem(
             `cache:content:parsed:${key.substring(15)}`,
             await storage.getItem(key)
           ))
@@ -757,6 +765,7 @@ interface ModulePublicRuntimeConfig {
   experimental: {
     stripQueryParameters: boolean
     clientDB: boolean
+    advanceQuery: boolean
   }
   respectPathCase: boolean
 
diff --git a/src/runtime/components/ContentDoc.vue b/src/runtime/components/ContentDoc.vue
index 477e3f573..f178460b3 100644
--- a/src/runtime/components/ContentDoc.vue
+++ b/src/runtime/components/ContentDoc.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { PropType, defineComponent, h, useSlots } from 'vue'
+import { type PropType, type VNode, defineComponent, h, useSlots } from 'vue'
 import { withTrailingSlash } from 'ufo'
-import type { QueryBuilderParams } from '../types'
+import type { ParsedContent, QueryBuilderParams } from '../types'
 import ContentRenderer from './ContentRenderer.vue'
 import ContentQuery from './ContentQuery.vue'
 import { useRoute, useContentHead } from '#imports'
 
-export default defineComponent({
+const ContentDoc = defineComponent({
   name: 'ContentDoc',
   props: {
     /**
@@ -116,4 +116,12 @@ export default defineComponent({
     )
   }
 })
+
+export default ContentDoc as typeof ContentDoc & {
+  new (): {
+    $slots: {
+      default: (context: { doc: ParsedContent, refresh: () => Promise<void> }) => VNode[] | undefined
+    }
+  }
+}
 </script>
diff --git a/src/runtime/components/ContentList.vue b/src/runtime/components/ContentList.vue
index eb36c1dc0..320d8ad65 100644
--- a/src/runtime/components/ContentList.vue
+++ b/src/runtime/components/ContentList.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
-import { PropType, defineComponent, h, useSlots } from 'vue'
-import type { QueryBuilderParams } from '../types'
+import { type PropType, type VNode, defineComponent, h, useSlots } from 'vue'
+import type { ParsedContent, QueryBuilderParams } from '../types'
 import ContentQuery from './ContentQuery.vue'
 
 const emptyNode = (slot: string, data: any) => h('pre', null, JSON.stringify({ message: 'You should use slots with <ContentList>', slot, data }, null, 2))
 
-export default defineComponent({
+const ContentList = defineComponent({
   name: 'ContentList',
   props: {
     /**
@@ -67,4 +67,12 @@ export default defineComponent({
     )
   }
 })
+
+export default ContentList as typeof ContentList & {
+  new (): {
+    $slots: {
+      default: (context: { data: ParsedContent[], refresh: () => Promise<void> }) => VNode[] | undefined
+    }
+  }
+}
 </script>
diff --git a/src/runtime/components/ContentNavigation.vue b/src/runtime/components/ContentNavigation.vue
index 30c7fad41..c97f44f2b 100644
--- a/src/runtime/components/ContentNavigation.vue
+++ b/src/runtime/components/ContentNavigation.vue
@@ -1,12 +1,11 @@
 <script lang="ts">
-import { toRefs, defineComponent, h, useSlots, computed } from 'vue'
-import type { PropType, VNode } from 'vue'
+import { toRefs, defineComponent, h, useSlots, computed, type PropType, type VNode } from 'vue'
 import { hash } from 'ohash'
 import type { NavItem, QueryBuilderParams, QueryBuilder } from '../types'
 import { useAsyncData, fetchContentNavigation, useState, useContent } from '#imports'
 import { NuxtLink } from '#components'
 
-export default defineComponent({
+const ContentNavigation = defineComponent({
   name: 'ContentNavigation',
   props: {
     /**
@@ -52,7 +51,7 @@ export default defineComponent({
    * Navigation empty fallback
    * @slot empty
    */
-  render (ctx: any) {
+  render (ctx: { navigation: NavItem[] }) {
     const slots = useSlots()
 
     const { navigation } = ctx
@@ -76,4 +75,12 @@ export default defineComponent({
       : defaultNode(navigation)
   }
 })
+
+export default ContentNavigation as typeof ContentNavigation & {
+  new (): {
+    $slots: {
+      default: ({ navigation }: { navigation: NavItem[] }) => VNode[] | undefined
+    }
+  }
+}
 </script>
diff --git a/src/runtime/components/ContentQuery.vue b/src/runtime/components/ContentQuery.vue
index 414f61249..28b912152 100644
--- a/src/runtime/components/ContentQuery.vue
+++ b/src/runtime/components/ContentQuery.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { hash } from 'ohash'
-import { PropType, toRefs, defineComponent, h, useSlots, watch } from 'vue'
+import { type PropType, type VNode, toRefs, defineComponent, h, useSlots, watch } from 'vue'
 import type { ParsedContent, ParsedContentMeta, QueryBuilder, SortParams } from '../types'
-import { computed, useAsyncData, queryContent } from '#imports'
+import { computed, useAsyncData, queryContent, useRuntimeConfig } from '#imports'
 
-export default defineComponent({
+const ContentQuery = defineComponent({
   name: 'ContentQuery',
   props: {
     /**
@@ -100,8 +100,22 @@ export default defineComponent({
      */
     const isPartial = computed(() => path.value?.includes('/_'))
 
+    const legacy = !useRuntimeConfig().public.content.experimental.advanceQuery
+
     watch(() => props, () => refresh(), { deep: true })
 
+    const resolveResult = (result: any) => {
+      if (legacy) {
+        if (result?.surround) {
+          return result.surround
+        }
+
+        return result?._id || Array.isArray(result) ? result : result?.result
+      }
+
+      return result.result
+    }
+
     const { data, refresh } = await useAsyncData<ParsedContent | ParsedContent[] | [ParsedContent | undefined, ParsedContent | undefined]>(
       `content-query-${hash(props)}`,
       () => {
@@ -127,7 +141,7 @@ export default defineComponent({
 
         if (locale.value) { queryBuilder = queryBuilder.where({ _locale: locale.value }) }
 
-        if (find.value === 'one') { return queryBuilder.findOne() as Promise<ParsedContent> }
+        if (find.value === 'one') { return queryBuilder.findOne().then(resolveResult) as Promise<ParsedContent> }
 
         if (find.value === 'surround') {
           if (!path.value) {
@@ -135,13 +149,18 @@ export default defineComponent({
             console.warn('[Content] Surround queries requires `path` prop to be set.')
             // eslint-disable-next-line no-console
             console.warn('[Content] Query without `path` will return regular `find()` results.')
-            return queryBuilder.find() as Promise<ParsedContent[]>
+            return queryBuilder.find().then(resolveResult) as Promise<ParsedContent[]>
           }
 
-          return queryBuilder.findSurround(path.value) as Promise<[ParsedContent | undefined, ParsedContent | undefined]>
+          if (legacy) {
+            return queryBuilder.findSurround(path.value) as Promise<[ParsedContent | undefined, ParsedContent | undefined]>
+          } else {
+            // @ts-ignore
+            return queryBuilder.withSurround(path.value).findOne().then(resolveResult)
+          }
         }
 
-        return queryBuilder.find() as Promise<ParsedContent[]>
+        return queryBuilder.find().then(resolveResult) as Promise<ParsedContent[]>
       }
     )
 
@@ -213,4 +232,18 @@ export default defineComponent({
     return emptyNode('default', { data, props, isPartial })
   }
 })
+
+export interface ContentQueryDefaultSlotContext {
+  data: ParsedContent | Array<ParsedContent>
+  refresh: () => Promise<void>
+  isPartial: boolean
+}
+
+export default ContentQuery as typeof ContentQuery & {
+  new (): {
+    $slots: {
+      default: (context: ContentQueryDefaultSlotContext) => VNode[] | undefined
+    }
+  }
+}
 </script>
diff --git a/src/runtime/composables/client-db.ts b/src/runtime/composables/client-db.ts
index bff983551..a43dbc7ee 100644
--- a/src/runtime/composables/client-db.ts
+++ b/src/runtime/composables/client-db.ts
@@ -3,10 +3,11 @@ import memoryDriver from 'unstorage/drivers/memory'
 import { type Storage, createStorage, prefixStorage } from 'unstorage'
 import { withBase } from 'ufo'
 import { useRuntimeConfig, useNuxtApp } from '#app'
-import { createPipelineFetcher } from '../query/match/pipeline'
 import { createQuery } from '../query/query'
-import type { NavItem, ParsedContent, ParsedContentMeta, QueryBuilderParams } from '../types'
+import type { NavItem, ParsedContent, ParsedContentMeta } from '../types'
 import { createNav } from '../server/navigation'
+import { createPipelineFetcher } from '../query/match/pipeline'
+import { ContentQueryBuilderParams } from '../types/query'
 import { useContentPreview } from './preview'
 
 const withContentBase = (url: string) => withBase(url, useRuntimeConfig().public.content.api.baseURL)
@@ -47,7 +48,10 @@ export function createDB (storage: Storage) {
   return {
     storage,
     fetch: createPipelineFetcher(getItems),
-    query: (query?: QueryBuilderParams) => createQuery(createPipelineFetcher(getItems), query)
+    query: (initialParams?: ContentQueryBuilderParams) => createQuery<ParsedContent>(
+      createPipelineFetcher(getItems),
+      { initialParams, legacy: false }
+    )
   }
 }
 
@@ -93,7 +97,7 @@ async function initContentDatabase () {
   return _contentDatabase
 }
 
-export async function generateNavigation (query?: QueryBuilderParams): Promise<Array<NavItem>> {
+export async function generateNavigation (query?: ContentQueryBuilderParams): Promise<Array<NavItem>> {
   const db = await useContentDatabase()
 
   if (!useContentPreview().getPreviewToken() && Object.keys(query || {}).length === 0) {
@@ -118,7 +122,7 @@ export async function generateNavigation (query?: QueryBuilderParams): Promise<A
 
   const dirConfigs = await db.query().where({ _path: /\/_dir$/i, _partial: true }).find()
 
-  const configs = dirConfigs.reduce((configs, conf: ParsedContent) => {
+  const configs = dirConfigs.result.reduce((configs, conf: ParsedContent) => {
     if (conf.title?.toLowerCase() === 'dir') {
       conf.title = undefined
     }
@@ -131,5 +135,5 @@ export async function generateNavigation (query?: QueryBuilderParams): Promise<A
     return configs
   }, {} as Record<string, ParsedContentMeta>)
 
-  return createNav(contents as ParsedContentMeta[], configs)
+  return createNav((contents?.result || contents), configs)
 }
diff --git a/src/runtime/composables/head.ts b/src/runtime/composables/head.ts
index fd005a9e0..89eaf3ecd 100644
--- a/src/runtime/composables/head.ts
+++ b/src/runtime/composables/head.ts
@@ -1,8 +1,8 @@
-import { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router'
+import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router'
 import type { HeadObjectPlain } from '@vueuse/head'
 import type { Ref } from 'vue'
 import { hasProtocol, joinURL, withTrailingSlash, withoutTrailingSlash } from 'ufo'
-import { ParsedContent } from '../types'
+import type { ParsedContent } from '../types'
 import { useRoute, nextTick, useHead, unref, watch, useRuntimeConfig } from '#imports'
 
 export const useContentHead = (
diff --git a/src/runtime/composables/navigation.ts b/src/runtime/composables/navigation.ts
index 96fa7276d..875a04381 100644
--- a/src/runtime/composables/navigation.ts
+++ b/src/runtime/composables/navigation.ts
@@ -3,20 +3,21 @@ import { useRuntimeConfig } from '#app'
 import type { NavItem, QueryBuilder, QueryBuilderParams } from '../types'
 import { encodeQueryParams } from '../utils/query'
 import { jsonStringify } from '../utils/json'
+import { ContentQueryBuilder } from '../types/query'
 import { addPrerenderPath, shouldUseClientDB, withContentBase } from './utils'
 import { queryContent } from './query'
 import { useContentPreview } from './preview'
 
-export const fetchContentNavigation = async (queryBuilder?: QueryBuilder | QueryBuilderParams): Promise<Array<NavItem>> => {
+export const fetchContentNavigation = async (queryBuilder?: QueryBuilder | QueryBuilderParams | ContentQueryBuilder): Promise<Array<NavItem>> => {
   const { content } = useRuntimeConfig().public
 
   // Ensure that queryBuilder is an instance of QueryBuilder
   if (typeof queryBuilder?.params !== 'function') {
-    queryBuilder = queryContent(queryBuilder as QueryBuilderParams)
+    queryBuilder = queryContent(queryBuilder as any)
   }
 
   // Get query params from queryBuilder instance to ensure default values are applied
-  const params: QueryBuilderParams = queryBuilder.params()
+  const params = queryBuilder.params()
 
   const apiPath = content.experimental.stripQueryParameters
     ? withContentBase(`/navigation/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params)}.json`)
diff --git a/src/runtime/composables/query.ts b/src/runtime/composables/query.ts
index dfe6088f1..e3ea7a965 100644
--- a/src/runtime/composables/query.ts
+++ b/src/runtime/composables/query.ts
@@ -2,16 +2,17 @@ import { joinURL, withLeadingSlash, withoutTrailingSlash } from 'ufo'
 import { hash } from 'ohash'
 import { useRuntimeConfig } from '#app'
 import { createQuery } from '../query/query'
-import type { ParsedContent, QueryBuilder, QueryBuilderParams } from '../types'
+import type { ParsedContent } from '../types'
 import { encodeQueryParams } from '../utils/query'
 import { jsonStringify } from '../utils/json'
+import { ContentQueryBuilder, ContentQueryBuilderParams } from '../types/query'
 import { addPrerenderPath, shouldUseClientDB, withContentBase } from './utils'
 import { useContentPreview } from './preview'
 
 /**
  * Query fetcher
  */
-export const createQueryFetch = <T = ParsedContent>() => async (query: QueryBuilder<T>) => {
+export const createQueryFetch = <T = ParsedContent>() => async (query: ContentQueryBuilder<T>) => {
   const { content } = useRuntimeConfig().public
 
   const params = query.params()
@@ -27,7 +28,7 @@ export const createQueryFetch = <T = ParsedContent>() => async (query: QueryBuil
 
   if (shouldUseClientDB()) {
     const db = await import('./client-db').then(m => m.useContentDatabase())
-    return db.fetch(query as QueryBuilder<ParsedContent>)
+    return db.fetch(query as ContentQueryBuilder<ParsedContent>)
   }
 
   const data = await $fetch(apiPath as any, {
@@ -53,12 +54,14 @@ export const createQueryFetch = <T = ParsedContent>() => async (query: QueryBuil
 /**
  * Query contents from path
  */
-export function queryContent<T = ParsedContent>(): QueryBuilder<T>;
-export function queryContent<T = ParsedContent>(query: string, ...pathParts: string[]): QueryBuilder<T>;
-export function queryContent<T = ParsedContent> (query: QueryBuilderParams): QueryBuilder<T>;
-export function queryContent<T = ParsedContent> (query?: string | QueryBuilderParams, ...pathParts: string[]) {
+export function queryContent<T = ParsedContent>(): ContentQueryBuilder<T>;
+export function queryContent<T = ParsedContent>(query: string, ...pathParts: string[]): ContentQueryBuilder<T>;
+export function queryContent<T = ParsedContent> (query: ContentQueryBuilderParams): ContentQueryBuilder<T>;
+export function queryContent<T = ParsedContent> (query?: string | ContentQueryBuilderParams, ...pathParts: string[]) {
   const { content } = useRuntimeConfig().public
-  const queryBuilder = createQuery<T>(createQueryFetch(), typeof query !== 'string' ? query : {})
+  const queryBuilder = content.experimental.advanceQuery
+    ? createQuery<T>(createQueryFetch(), { initialParams: typeof query !== 'string' ? query : {}, legacy: false })
+    : createQuery<T>(createQueryFetch(), { initialParams: typeof query !== 'string' ? query : {}, legacy: true })
   let path: string
 
   if (typeof query === 'string') {
@@ -93,7 +96,7 @@ export function queryContent<T = ParsedContent> (query?: string | QueryBuilderPa
       const queryLocale = params.where?.find(w => w._locale)?._locale
       if (!queryLocale) {
         params.where = params.where || []
-        params.where.push({ _locale: content.defaultLocale })
+        params.where.push({ _locale: content.defaultLocale as string })
       }
     }
 
diff --git a/src/runtime/legacy/composables/client-db.ts b/src/runtime/legacy/composables/client-db.ts
new file mode 100644
index 000000000..f01685c05
--- /dev/null
+++ b/src/runtime/legacy/composables/client-db.ts
@@ -0,0 +1,139 @@
+// @ts-ignore
+import memoryDriver from 'unstorage/drivers/memory'
+import { type Storage, createStorage, prefixStorage } from 'unstorage'
+import { withBase } from 'ufo'
+import { useRuntimeConfig, useNuxtApp } from '#app'
+import { createPipelineFetcherLegacy } from '../../query/match/pipeline-legacy'
+import { createQuery } from '../../query/query'
+import type { NavItem, ParsedContent, ParsedContentMeta, QueryBuilderParams } from '../../types'
+import { createNav } from '../../server/navigation'
+import { useContentPreview } from '../../composables/preview'
+import { ContentQueryBuilderParams, ContentQueryFetcher } from '../../types/query'
+
+const withContentBase = (url: string) => withBase(url, useRuntimeConfig().public.content.api.baseURL)
+
+export const contentStorage = prefixStorage(createStorage({ driver: memoryDriver() }), '@content')
+
+export function createDB (storage: Storage) {
+  async function getItems () {
+    const keys = new Set<string>(await storage.getKeys('cache:'))
+
+    // Merge preview items
+    const previewToken = useContentPreview().getPreviewToken()
+    if (previewToken) {
+      // Ignore cache content if preview requires it
+      const previewMeta: any = await storage.getItem(`${previewToken}$`).then(data => data || {})
+      if (Array.isArray(previewMeta.ignoreSources)) {
+        const sources = (previewMeta.ignoreSources as Array<string>).map(s => `cache:${s.trim()}:`)
+        // Remove all keys that starts with ignored sources
+        for (const key of keys) {
+          if (sources.some(s => key.startsWith(s))) {
+            keys.delete(key)
+          }
+        }
+      }
+
+      const previewKeys = await storage.getKeys(`${previewToken}:`)
+      const previewContents = await Promise.all(previewKeys.map(key => storage.getItem(key) as Promise<ParsedContent>))
+      for (const pItem of previewContents) {
+        keys.delete(`cache:${pItem._id}`)
+        if (!pItem.__deleted) {
+          keys.add(`${previewToken}:${pItem._id}`)
+        }
+      }
+    }
+    const items = await Promise.all(Array.from(keys).map(key => storage.getItem(key) as Promise<ParsedContent>))
+    return items
+  }
+  return {
+    storage,
+    fetch: createPipelineFetcherLegacy(getItems),
+    query: (query?: QueryBuilderParams) => createQuery(createPipelineFetcherLegacy(getItems) as unknown as ContentQueryFetcher<ParsedContent>, {
+      initialParams: query as ContentQueryBuilderParams,
+      legacy: true
+    })
+  }
+}
+
+let contentDatabase: ReturnType<typeof createDB> | null = null
+let contentDatabaseInitPromise: ReturnType<typeof initContentDatabase> | null = null
+export async function useContentDatabase () {
+  if (contentDatabaseInitPromise) {
+    await contentDatabaseInitPromise
+  } else if (!contentDatabase) {
+    contentDatabaseInitPromise = initContentDatabase()
+    contentDatabase = await contentDatabaseInitPromise
+  }
+  return contentDatabase!
+}
+
+/**
+ * Initialize content database
+ * - Fetch content from cache api
+ * - Call `content:storage` hook to allow plugins to fill storage
+ */
+async function initContentDatabase () {
+  const nuxtApp = useNuxtApp()
+  const { content } = useRuntimeConfig().public
+
+  const _contentDatabase = createDB(contentStorage)
+  const integrity = await _contentDatabase.storage.getItem('integrity')
+  if (content.integrity !== +(integrity || 0)) {
+    const { contents, navigation } = await $fetch(withContentBase(content.integrity ? `cache.${content.integrity}.json` : 'cache.json')) as any
+
+    await Promise.all(
+      contents.map((content: ParsedContent) => _contentDatabase.storage.setItem(`cache:${content._id}`, content))
+    )
+
+    await _contentDatabase.storage.setItem('navigation', navigation)
+
+    await _contentDatabase.storage.setItem('integrity', content.integrity)
+  }
+
+  // call `content:storage` hook to allow plugins to fill storage
+  // @ts-ignore
+  await nuxtApp.callHook('content:storage', _contentDatabase.storage)
+
+  return _contentDatabase
+}
+
+export async function generateNavigation (query?: QueryBuilderParams): Promise<Array<NavItem>> {
+  const db = await useContentDatabase()
+
+  if (!useContentPreview().getPreviewToken() && Object.keys(query || {}).length === 0) {
+    return db.storage.getItem('navigation') as Promise<Array<NavItem>>
+  }
+
+  const contents = await db.query(query)
+    .where({
+    /**
+     * Partial contents are not included in the navigation
+     * A partial content is a content that has `_` prefix in its path
+     */
+      _partial: false,
+      /**
+     * Exclude any pages which have opted out of navigation via frontmatter.
+     */
+      navigation: {
+        $ne: false
+      }
+    })
+    .find()
+
+  const dirConfigs = await db.query().where({ _path: /\/_dir$/i, _partial: true }).find()
+
+  const configs = dirConfigs.reduce((configs, conf) => {
+    if (conf.title?.toLowerCase() === 'dir') {
+      conf.title = undefined
+    }
+    const key = conf._path!.split('/').slice(0, -1).join('/') || '/'
+    configs[key] = {
+      ...conf,
+      // Extract meta from body. (non MD files)
+      ...conf.body
+    }
+    return configs
+  }, {} as Record<string, ParsedContentMeta>)
+
+  return createNav(contents, configs)
+}
diff --git a/src/runtime/legacy/composables/query.ts b/src/runtime/legacy/composables/query.ts
new file mode 100644
index 000000000..c0db850c8
--- /dev/null
+++ b/src/runtime/legacy/composables/query.ts
@@ -0,0 +1,107 @@
+import { joinURL, withLeadingSlash, withoutTrailingSlash } from 'ufo'
+import { hash } from 'ohash'
+import { useRuntimeConfig } from '#app'
+import { createQuery } from '../../query/query'
+import type { ParsedContent, QueryBuilder, QueryBuilderParams } from '../../types'
+import { encodeQueryParams } from '../../utils/query'
+import { jsonStringify } from '../../utils/json'
+import { addPrerenderPath, shouldUseClientDB, withContentBase } from '../../composables/utils'
+import { useContentPreview } from '../../composables/preview'
+
+/**
+ * Query fetcher
+ */
+export const createQueryFetch = <T = ParsedContent>() => async (query: QueryBuilder<T>) => {
+  const { content } = useRuntimeConfig().public
+
+  const params = query.params()
+
+  const apiPath = content.experimental.stripQueryParameters
+    ? withContentBase(`/query/${process.dev ? '_' : `${hash(params)}.${content.integrity}`}/${encodeQueryParams(params as any)}.json`)
+    : withContentBase(process.dev ? '/query' : `/query/${hash(params)}.${content.integrity}.json`)
+
+  // Prefetch the query
+  if (!process.dev && process.server) {
+    addPrerenderPath(apiPath)
+  }
+
+  if (shouldUseClientDB()) {
+    const db = await import('./client-db').then(m => m.useContentDatabase())
+    return db.fetch(query as QueryBuilder<ParsedContent>)
+  }
+
+  const data = await $fetch(apiPath as any, {
+    method: 'GET',
+    responseType: 'json',
+    params: content.experimental.stripQueryParameters
+      ? undefined
+      : {
+          _params: jsonStringify(params),
+          previewToken: useContentPreview().getPreviewToken()
+        }
+  })
+
+  // On SSG, all url are redirected to `404.html` when not found, so we need to check the content type
+  // to know if the response is a valid JSON or not
+  if (typeof data === 'string' && data.startsWith('<!DOCTYPE html>')) {
+    throw new Error('Not found')
+  }
+
+  return data
+}
+
+/**
+ * Query contents from path
+ */
+export function queryContent<T = ParsedContent>(): QueryBuilder<T>;
+export function queryContent<T = ParsedContent>(query: string, ...pathParts: string[]): QueryBuilder<T>;
+export function queryContent<T = ParsedContent> (query: QueryBuilderParams): QueryBuilder<T>;
+export function queryContent<T = ParsedContent> (query?: string | QueryBuilderParams, ...pathParts: string[]) {
+  const { content } = useRuntimeConfig().public
+  const queryBuilder = createQuery<T>(createQueryFetch() as any, {
+    initialParams: typeof query !== 'string' ? query as any : {},
+    legacy: true
+  })
+  let path: string
+
+  if (typeof query === 'string') {
+    path = withLeadingSlash(joinURL(query, ...pathParts))
+  }
+
+  const originalParamsFn = queryBuilder.params
+  queryBuilder.params = () => {
+    const params = originalParamsFn()
+
+    // Add `path` as `where` condition
+    if (path) {
+      params.where = params.where || []
+      if (params.first && (params.where || []).length === 0) {
+      // If query contains `path` and does not contain any `where` condition
+      // Then can use `path` as `where` condition to find exact match
+        params.where.push({ _path: withoutTrailingSlash(path) })
+      } else {
+        params.where.push({ _path: new RegExp(`^${path.replace(/[-[\]{}()*+.,^$\s/]/g, '\\$&')}`) })
+      }
+    }
+
+    // Provide default sort order
+    if (!params.sort?.length) {
+      params.sort = [{ _file: 1, $numeric: true }]
+    }
+
+    // Filter by locale if:
+    // - locales are defined
+    // - query doesn't already have a locale filter
+    if (content.locales.length) {
+      const queryLocale = params.where?.find(w => w._locale)?._locale
+      if (!queryLocale) {
+        params.where = params.where || []
+        params.where.push({ _locale: content.defaultLocale })
+      }
+    }
+
+    return params
+  }
+
+  return queryBuilder as unknown as QueryBuilder<T>
+}
diff --git a/src/runtime/legacy/plugins/documentDriven.ts b/src/runtime/legacy/plugins/documentDriven.ts
new file mode 100644
index 000000000..6b42c1278
--- /dev/null
+++ b/src/runtime/legacy/plugins/documentDriven.ts
@@ -0,0 +1,320 @@
+import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router'
+import { withoutTrailingSlash, hasProtocol } from 'ufo'
+import { pascalCase } from 'scule'
+import { useRuntimeConfig, addRouteMiddleware, callWithNuxt, navigateTo, useRoute, defineNuxtPlugin, prefetchComponents, useRouter } from '#app'
+import type { MarkdownNode, NavItem, ParsedContent } from '../../types'
+import type { ModuleOptions } from '../../../module'
+import { useContentState } from '../../composables/content'
+import { useContentHelpers } from '../../composables/helpers'
+import { fetchContentNavigation } from '../../composables/navigation'
+import { queryContent } from '../composables/query'
+import { componentNames } from '#components'
+// @ts-ignore
+import layouts from '#build/layouts'
+
+export default defineNuxtPlugin((nuxt) => {
+  const moduleOptions = useRuntimeConfig()?.public?.content.documentDriven as unknown as Exclude<ModuleOptions['documentDriven'], boolean>
+  const isClientDBEnabled = useRuntimeConfig()?.public?.content.experimental.clientDB
+  const { navigation, pages, globals, surrounds } = useContentState()
+
+  /**
+   * Finds a layout value from a cascade of objects.
+   */
+  const findLayout = (to: RouteLocationNormalized, page: ParsedContent, navigation: NavItem[], globals: Record<string, any>) => {
+    // Page `layout` key has priority
+    if (page && page?.layout) { return page.layout }
+
+    // Resolve key from .vue page meta
+    if (to.matched.length && to.matched[0].meta?.layout) { return to.matched[0].meta.layout }
+
+    // Resolve key from navigation
+    if (navigation && page) {
+      const { navKeyFromPath } = useContentHelpers()
+      const layoutFromNav = navKeyFromPath(page._path!, 'layout', navigation)
+      if (layoutFromNav) { return layoutFromNav }
+    }
+
+    // Resolve key from globals fallback
+    if (moduleOptions.layoutFallbacks && globals) {
+      let layoutFallback
+      for (const fallback of moduleOptions.layoutFallbacks) {
+        if (globals[fallback] && globals[fallback].layout) {
+          layoutFallback = globals[fallback].layout
+          break
+        }
+      }
+      if (layoutFallback) { return layoutFallback }
+    }
+
+    return 'default'
+  }
+
+  const refresh = async (to: RouteLocationNormalized | RouteLocationNormalizedLoaded, dedup = false) => {
+    // Call hook before fetching content
+    // @ts-ignore
+    nuxt.callHook('content:document-driven:start', { route: to, dedup })
+
+    const routeConfig = (to.meta.documentDriven || {}) as any
+    // Disabled document driven mode on next route
+    if (to.meta.documentDriven === false) {
+      return
+    }
+
+    // Normalize route path
+    const _path = withoutTrailingSlash(to.path)
+
+    // Promises array to be executed all at once
+    const promises: (() => Promise<any> | any)[] = []
+
+    /**
+     *
+     * `navigation`
+     */
+    if (moduleOptions.navigation && routeConfig.navigation !== false) {
+      const navigationQuery = () => {
+        const { navigation } = useContentState()
+
+        if (navigation.value && !dedup) { return navigation.value }
+
+        return fetchContentNavigation()
+          .then((_navigation) => {
+            navigation.value = _navigation
+            return _navigation
+          })
+          .catch(() => null)
+      }
+
+      promises.push(navigationQuery)
+    } else {
+      promises.push(() => Promise.resolve(null))
+    }
+
+    /**
+     * `globals`
+     */
+    if (moduleOptions.globals) {
+      const globalsQuery = () => {
+        const { globals } = useContentState()
+
+        if (
+          typeof moduleOptions.globals === 'object' && Array.isArray(moduleOptions.globals)
+        ) {
+          // eslint-disable-next-line no-console
+          console.log('Globals must be a list of keys with QueryBuilderParams as a value.')
+          return
+        }
+
+        return Promise.all(
+          Object.entries(moduleOptions.globals!).map(
+            ([key, query]: [string, any]) => {
+              // Avoid fetching same file twice
+              if (!dedup && globals.value[key]) { return globals.value[key] }
+
+              // Supports `find` if passed as `query: 'find'` in the query definition.
+              let type = 'findOne'
+              if (query?.type) { type = query.type }
+
+              return (queryContent(query) as any)[type]().catch(() => null)
+            }
+          )
+        ).then(
+          (values) => {
+            return values.reduce(
+              (acc, value, index) => {
+                const key = Object.keys(moduleOptions.globals!)[index]
+
+                acc[key] = value
+
+                return acc
+              }, {})
+          }
+        )
+      }
+
+      promises.push(globalsQuery)
+    } else {
+      promises.push(() => Promise.resolve(null))
+    }
+
+    /**
+     * `page`
+     */
+    if (moduleOptions.page && routeConfig.page !== false) {
+      let where = { _path }
+      if (typeof routeConfig.page === 'string') {
+        where = { _path: routeConfig.page }
+      }
+      if (typeof routeConfig.page === 'object') {
+        where = routeConfig.page
+      }
+      const pageQuery = () => {
+        const { pages } = useContentState()
+
+        // Return same page as page is already loaded
+        if (!dedup && pages.value[_path] && pages.value[_path]._path === _path) {
+          return pages.value[_path]
+        }
+
+        return queryContent()
+          .where(where)
+          .findOne()
+          .catch(() => null)
+      }
+
+      promises.push(pageQuery)
+    } else {
+      promises.push(() => Promise.resolve(null))
+    }
+
+    /**
+     * `surround`
+     */
+    if (moduleOptions.surround && routeConfig.surround !== false) {
+      let surround: any = _path
+      if (['string', 'object'].includes(typeof routeConfig.page)) {
+        surround = routeConfig.page
+      }
+      if (['string', 'object'].includes(typeof routeConfig.surround)) {
+        surround = routeConfig.surround
+      }
+      const surroundQuery = () => {
+        const { surrounds } = useContentState()
+
+        // Return same surround as page is already loaded
+        if (!dedup && surrounds.value[_path]) {
+          return surrounds.value[_path]
+        }
+
+        return queryContent()
+          .where({
+            _partial: { $not: true },
+            navigation: { $not: false }
+          })
+        // Exclude `body` for `surround`
+          .without(['body'])
+          .findSurround(surround)
+          .catch(() => null)
+      }
+
+      promises.push(surroundQuery)
+    } else {
+      promises.push(() => Promise.resolve(null))
+    }
+
+    return await Promise.all(promises.map(promise => promise())).then(async ([
+      _navigation,
+      _globals,
+      _page,
+      _surround
+    ]) => {
+      if (_navigation) {
+        navigation.value = _navigation
+      }
+
+      if (_globals) {
+        globals.value = _globals
+      }
+
+      if (_surround) {
+        surrounds.value[_path] = _surround
+      }
+
+      // Use `redirect` key to redirect to another page
+      const redirectTo = _page?.redirect || _page?._dir?.navigation?.redirect
+      if (redirectTo) {
+        // In case of redirection, it is not necessary to fetch page layout
+        // Just fill the page state with the redirect path
+        pages.value[_path] = _page
+        return redirectTo
+      }
+
+      if (_page) {
+        // Find used layout
+        const layoutName = findLayout(to, _page, _navigation, _globals)
+
+        // Prefetch layout component
+        const layout = layouts[layoutName]
+
+        if (layout && typeof layout === 'function') {
+          await layout()
+        }
+        // Apply layout
+        to.meta.layout = layoutName
+        _page.layout = layoutName
+      }
+
+      // Update values
+      pages.value[_path] = _page
+
+      // Call hook after content is fetched
+      // @ts-ignore
+      await nuxt.callHook('content:document-driven:finish', { route: to, dedup, page: _page, navigation: _navigation, globals: _globals, surround: _surround })
+    })
+  }
+
+  // Prefetch page content
+  if (process.client) {
+    const router = useRouter()
+    nuxt.hook('link:prefetch', (link) => {
+      if (!(link in pages.value) && !hasProtocol(link)) {
+        const route = router.resolve(link)
+        if (route.matched.length > 0) {
+          refresh(route)
+        }
+      }
+    })
+    // @ts-expect-error hook is not typed
+    nuxt.hooks.hook('content:document-driven:finish', ({ page }) => {
+      if (page?.body?.children) {
+        prefetchBodyComponents(page.body.children)
+      }
+    })
+  }
+
+  // Route middleware
+  addRouteMiddleware(async (to, from) => {
+    // Avoid calling on hash change
+    if (process.client && !isClientDBEnabled && to.path === from.path) {
+      if (!to.meta.layout) {
+        const _path = withoutTrailingSlash(to.path)
+        if (pages.value[_path]) {
+          to.meta.layout = pages.value[_path].layout
+        }
+      }
+      return
+    }
+
+    const redirect = await refresh(to, false)
+
+    if (redirect) {
+      if (hasProtocol(redirect)) {
+        return callWithNuxt(nuxt, navigateTo, [redirect, { external: true }])
+      } else {
+        return redirect
+      }
+    }
+  })
+
+  if (process.server) {
+    delete nuxt.payload.prerenderedAt
+  }
+
+  // @ts-ignore - Refresh on client-side
+  nuxt.hook('app:data:refresh', async () => process.client && await refresh(useRoute(), true))
+})
+
+function prefetchBodyComponents (nodes: MarkdownNode[]) {
+  for (const node of nodes) {
+    if (node.children) {
+      prefetchBodyComponents(node.children)
+    }
+    if (node.type === 'element' && node.tag) {
+      const el = pascalCase(node.tag)
+      for (const name of ['Prose' + el, el]) {
+        if (componentNames.includes(name)) {
+          prefetchComponents(name)
+        }
+      }
+    }
+  }
+}
diff --git a/src/runtime/legacy/types.d.ts b/src/runtime/legacy/types.d.ts
new file mode 100644
index 000000000..9ee1281a4
--- /dev/null
+++ b/src/runtime/legacy/types.d.ts
@@ -0,0 +1,6 @@
+import type { ParsedContent, QueryBuilder, QueryBuilderParams } from "../types"
+import type { H3Event } from 'h3'
+
+export function serverQueryContent<T = ParsedContent>(event: H3Event): QueryBuilder<T>;
+export function serverQueryContent<T = ParsedContent>(event: H3Event, params?: QueryBuilderParams): QueryBuilder<T>;
+export function serverQueryContent<T = ParsedContent>(event: H3Event, query?: string, ...pathParts: string[]): QueryBuilder<T>;
\ No newline at end of file
diff --git a/src/runtime/plugins/documentDriven.ts b/src/runtime/plugins/documentDriven.ts
index ced44f3e6..6c5afe3b2 100644
--- a/src/runtime/plugins/documentDriven.ts
+++ b/src/runtime/plugins/documentDriven.ts
@@ -152,51 +152,32 @@ export default defineNuxtPlugin((nuxt) => {
 
         // Return same page as page is already loaded
         if (!dedup && pages.value[_path] && pages.value[_path]._path === _path) {
-          return pages.value[_path]
+          return {
+            result: pages.value[_path],
+            surround: surrounds.value[_path]
+          }
         }
 
-        return queryContent()
+        const query = queryContent()
           .where(where)
-          .findOne()
-          .catch(() => null)
-      }
+          .withDirConfig()
 
-      promises.push(pageQuery)
-    } else {
-      promises.push(() => Promise.resolve(null))
-    }
-
-    /**
-     * `surround`
-     */
-    if (moduleOptions.surround && routeConfig.surround !== false) {
-      let surround: any = _path
-      if (['string', 'object'].includes(typeof routeConfig.page)) {
-        surround = routeConfig.page
-      }
-      if (['string', 'object'].includes(typeof routeConfig.surround)) {
-        surround = routeConfig.surround
-      }
-      const surroundQuery = () => {
-        const { surrounds } = useContentState()
+        if (moduleOptions.surround && routeConfig.surround !== false) {
+          let surround: any = _path
+          if (['string', 'object'].includes(typeof routeConfig.page)) {
+            surround = routeConfig.page
+          }
+          if (['string', 'object'].includes(typeof routeConfig.surround)) {
+            surround = routeConfig.surround
+          }
 
-        // Return same surround as page is already loaded
-        if (!dedup && surrounds.value[_path]) {
-          return surrounds.value[_path]
+          query.withSurround(surround)
         }
 
-        return queryContent()
-          .where({
-            _partial: { $not: true },
-            navigation: { $not: false }
-          })
-        // Exclude `body` for `surround`
-          .without(['body'])
-          .findSurround(surround)
-          .catch(() => null)
+        return query.findOne().catch(() => null)
       }
 
-      promises.push(surroundQuery)
+      promises.push(pageQuery)
     } else {
       promises.push(() => Promise.resolve(null))
     }
@@ -204,8 +185,7 @@ export default defineNuxtPlugin((nuxt) => {
     return await Promise.all(promises.map(promise => promise())).then(async ([
       _navigation,
       _globals,
-      _page,
-      _surround
+      _page
     ]) => {
       if (_navigation) {
         navigation.value = _navigation
@@ -215,22 +195,22 @@ export default defineNuxtPlugin((nuxt) => {
         globals.value = _globals
       }
 
-      if (_surround) {
-        surrounds.value[_path] = _surround
+      if (_page?.surround) {
+        surrounds.value[_path] = _page.surround
       }
 
       // Use `redirect` key to redirect to another page
-      const redirectTo = _page?.redirect || _page?._dir?.navigation?.redirect
+      const redirectTo = _page?.result?.redirect || _page?.dirConfig?.navigation?.redirect
       if (redirectTo) {
         // In case of redirection, it is not necessary to fetch page layout
         // Just fill the page state with the redirect path
-        pages.value[_path] = _page
+        pages.value[_path] = _page.result
         return redirectTo
       }
 
-      if (_page) {
+      if (_page?.result) {
         // Find used layout
-        const layoutName = findLayout(to, _page, _navigation, _globals)
+        const layoutName = findLayout(to, _page.result, _navigation, _globals)
 
         // Prefetch layout component
         const layout = layouts[layoutName]
@@ -240,15 +220,16 @@ export default defineNuxtPlugin((nuxt) => {
         }
         // Apply layout
         to.meta.layout = layoutName
-        _page.layout = layoutName
+
+        _page.result.layout = layoutName
       }
 
       // Update values
-      pages.value[_path] = _page
+      pages.value[_path] = _page?.result
 
       // Call hook after content is fetched
       // @ts-ignore
-      await nuxt.callHook('content:document-driven:finish', { route: to, dedup, page: _page, navigation: _navigation, globals: _globals, surround: _surround })
+      await nuxt.callHook('content:document-driven:finish', { route: to, dedup, page: _page?.result, navigation: _navigation, globals: _globals, surround: _page?.surround })
     })
   }
 
diff --git a/src/runtime/query/match/pipeline-legacy.ts b/src/runtime/query/match/pipeline-legacy.ts
new file mode 100644
index 000000000..ac0214c4f
--- /dev/null
+++ b/src/runtime/query/match/pipeline-legacy.ts
@@ -0,0 +1,27 @@
+import type { QueryBuilder } from '../../types'
+import type { ContentQueryBuilder } from '../../types/query'
+import { createPipelineFetcher } from './pipeline'
+
+export function createPipelineFetcherLegacy<T> (getContentsList: () => Promise<T[]>) {
+  const _pipelineFetcher = createPipelineFetcher(getContentsList)
+
+  return async (query: QueryBuilder<T>): Promise<T | T[]> => {
+    const params = query.params()
+    const result = await _pipelineFetcher(query as unknown as ContentQueryBuilder<T>)
+
+    if (params.surround) {
+      // @ts-ignore
+      return result.surround
+    }
+
+    if ((result as any).dirConfig) {
+      result.result = {
+        _path: (result as any).dirConfig?._path,
+        ...(result.result as T),
+        _dir: (result as any).dirConfig
+      }
+    }
+
+    return result.result as T | T[]
+  }
+}
diff --git a/src/runtime/query/match/pipeline.ts b/src/runtime/query/match/pipeline.ts
index 4e57bd13a..8b2aabebe 100644
--- a/src/runtime/query/match/pipeline.ts
+++ b/src/runtime/query/match/pipeline.ts
@@ -1,5 +1,7 @@
-import type { QueryBuilder, QueryBuilderParams, QueryPipe } from '../../types'
-import { apply, ensureArray, sortList, withoutKeys, withKeys } from './utils'
+import { joinURL } from 'ufo'
+import type { ContentQueryFindResponse, ContentQueryResponse } from '../../types/api'
+import type { ContentQueryBuilder, ContentQueryBuilderParams } from '../../types/query'
+import { apply, ensureArray, sortList, withoutKeys, withKeys, omit } from './utils'
 import { createMatch } from '.'
 
 export function createPipelineFetcher<T> (getContentsList: () => Promise<T[]>) {
@@ -9,7 +11,7 @@ export function createPipelineFetcher<T> (getContentsList: () => Promise<T[]>) {
   /**
    * Exctract surrounded items of specific condition
    */
-  const surround = (data: any[], { query, before, after }: Exclude<QueryBuilderParams['surround'], undefined>) => {
+  const surround = (data: any[], { query, before, after }: Exclude<ContentQueryBuilderParams['surround'], undefined>) => {
     const matchQuery = typeof query === 'string' ? { _path: query } : query
     // Find matched item index
     const index = data.findIndex(item => match(item, matchQuery))
@@ -21,39 +23,104 @@ export function createPipelineFetcher<T> (getContentsList: () => Promise<T[]>) {
     return index === -1 ? slice : slice.map((_, i) => data[index - before! + i + Number(i >= before!)] || null)
   }
 
-  const pipelines: Array<QueryPipe> = [
+  type ContentQueryPipe<T, InputState = ContentQueryFindResponse<T>, OutputState = ContentQueryFindResponse<T>> = (state: InputState, params: ContentQueryBuilderParams, db: Array<T>) => OutputState | void
+
+  const matchingPipelines: Array<ContentQueryPipe<T>> = [
     // Conditions
-    (data, params) => data.filter(item => ensureArray(params.where!).every(matchQuery => match(item, matchQuery))),
+    (state, params) => {
+      const filtered = state.result.filter(item => ensureArray(params.where!).every(matchQuery => match(item, matchQuery)))
+      return {
+        ...state,
+        result: filtered,
+        total: filtered.length
+      }
+    },
     // Sort data
-    (data, params) => ensureArray(params.sort).forEach(options => sortList(data, options!)),
-    // Surround logic
-    (data, params) => params.surround ? surround(data, params.surround) : data,
+    (state, params) => ensureArray(params.sort).forEach(options => sortList(state.result, options!)),
+    function fetchSurround (state, params, db) {
+      if (params.surround) {
+        // @ts-ignore
+        state.surround = surround(db, params.surround)
+      }
+      return state
+    }
+  ]
+
+  const transformingPiples: Array<ContentQueryPipe<T>> = [
     // Skip first items
-    (data, params) => (params.skip ? data.slice(params.skip) : data),
+    (state, params) => {
+      if (params.skip) {
+        return {
+          ...state,
+          result: state.result.slice(params.skip),
+          skip: params.skip
+        }
+      }
+    },
     // Pick first items
-    (data, params) => (params.limit ? data.slice(0, params.limit) : data),
+    (state, params) => {
+      if (params.limit) {
+        return {
+          ...state,
+          result: state.result.slice(0, params.limit),
+          limit: params.limit
+        }
+      }
+    },
+    function fetchDirConfig (state, params, db) {
+      if (params.dirConfig) {
+        const path = (state.result[0] as any)?._path || params.where?.find(w => w._path)?._path as string
+        const dirConfig = db.find((item: any) => item._path === joinURL(path, '_dir'))
+        if (dirConfig) {
+          // @ts-ignore
+          state.dirConfig = { _path: dirConfig._path, ...withoutKeys(['_'])(dirConfig) }
+        }
+      }
+      return state
+    },
     // Remove unwanted fields
-    (data, params) => apply(withoutKeys(params.without))(data),
+    (state, params) => ({
+      ...state,
+      result: apply(withoutKeys(params.without))(state.result)
+    }),
     // Select only wanted fields
-    (data, params) => apply(withKeys(params.only))(data)
+    (state, params) => ({
+      ...state,
+      result: apply(withKeys(params.only))(state.result)
+    })
   ]
 
-  return async (query: QueryBuilder<T>): Promise<T | T[]> => {
-    const data = await getContentsList()
-    const params = query.params()
+  return async (query: ContentQueryBuilder<T>): Promise<ContentQueryResponse<T>> => {
+    const db = await getContentsList()
 
-    const filteredData = pipelines.reduce(($data: Array<T>, pipe: QueryPipe) => pipe($data, params) || $data, data)
+    const params = query.params()
 
-    // return first item if query is for single item
-    if (params.first) {
-      return filteredData[0]
+    const result1: ContentQueryFindResponse<T> = {
+      result: db,
+      limit: 0,
+      skip: 0,
+      total: db.length
     }
 
+    const matchedData = matchingPipelines.reduce(($data, pipe) => pipe($data, params, db) || $data, result1)
+
     // return count if query is for count
     if (params.count) {
-      return (filteredData.length ?? 0) as unknown as T
+      return {
+        result: matchedData.result.length
+      }
+    }
+
+    const result = transformingPiples.reduce(($data, pipe) => pipe($data, params, db) || $data, matchedData)
+
+    // return first item if query is for single item
+    if (params.first) {
+      return {
+        ...omit(['skip', 'limit', 'total'])(result),
+        result: result.result[0]
+      }
     }
 
-    return filteredData
+    return result
   }
 }
diff --git a/src/runtime/query/query.ts b/src/runtime/query/query.ts
index 159995c3d..2032ff9a1 100644
--- a/src/runtime/query/query.ts
+++ b/src/runtime/query/query.ts
@@ -1,62 +1,84 @@
-import type { DatabaseFetcher, QueryBuilder, QueryBuilderParams, SortOptions } from '../types'
+import type { QueryBuilder, SortOptions } from '../types'
 import { ParsedContent } from '../types'
+import { ContentQueryBuilder, ContentQueryBuilderParams, ContentQueryFetcher } from '../types/query'
 import { ensureArray } from './match/utils'
 
 const arrayParams = ['sort', 'where', 'only', 'without']
 
-export const createQuery = <T = ParsedContent>(
-  fetcher: DatabaseFetcher<T>,
-  intitialParams?: QueryBuilderParams
-): QueryBuilder<T> => {
-  const queryParams = {
-    ...intitialParams
-  } as QueryBuilderParams
-
-  for (const key of arrayParams) {
-    if (queryParams[key]) {
-      queryParams[key] = ensureArray(queryParams[key])
-    }
+interface QueryOptions {
+  initialParams?: ContentQueryBuilderParams
+  legacy?: boolean
+}
+
+export function createQuery <T = ParsedContent>(fetcher: ContentQueryFetcher<T>, opts: QueryOptions & { legacy: true }): QueryBuilder<T>
+export function createQuery <T = ParsedContent>(fetcher: ContentQueryFetcher<T>, opts: QueryOptions & { legacy: false }): ContentQueryBuilder<T>
+export function createQuery <T = ParsedContent> (fetcher: ContentQueryFetcher<T>, opts: QueryOptions = {}) {
+  const queryParams: ContentQueryBuilderParams = {}
+
+  for (const key of Object.keys(opts.initialParams || {})) {
+    queryParams[key] = arrayParams.includes(key) ? ensureArray(opts.initialParams![key]) : opts.initialParams![key]
   }
 
   /**
    * Factory function to create a parameter setter
    */
   const $set = (key: string, fn: (...values: any[]) => any = v => v) => {
-    return (...values: []) => {
+    return (...values: any[]) => {
       queryParams[key] = fn(...values)
       return query
     }
   }
 
-  const query: QueryBuilder<T> = {
+  const resolveResult = (result: any) => {
+    if (opts.legacy) {
+      if (result?.surround) {
+        return result.surround
+      }
+
+      if ((result as any).dirConfig) {
+        result.result = {
+          _path: (result as any).dirConfig?._path,
+          ...(result.result as T),
+          _dir: (result as any).dirConfig
+        }
+      }
+
+      return result?._path || Array.isArray(result) ? result : result?.result
+    }
+
+    return result
+  }
+
+  const query: any = {
     params: () => ({
       ...queryParams,
       ...(queryParams.where ? { where: [...ensureArray(queryParams.where)] } : {}),
       ...(queryParams.sort ? { sort: [...ensureArray(queryParams.sort)] } : {})
     }),
-    only: $set('only', ensureArray) as () => ReturnType<QueryBuilder<T>['only']>,
+    only: $set('only', ensureArray),
     without: $set('without', ensureArray),
     where: $set('where', (q: any) => [...ensureArray(queryParams.where), ...ensureArray(q)]),
     sort: $set('sort', (sort: SortOptions) => [...ensureArray(queryParams.sort), ...ensureArray(sort)]),
     limit: $set('limit', v => parseInt(String(v), 10)),
     skip: $set('skip', v => parseInt(String(v), 10)),
     // find
-    find: () => fetcher(query) as Promise<Array<T>>,
-    findOne: () => {
-      queryParams.first = true
-      return fetcher(query) as Promise<T>
-    },
-    findSurround: (surroundQuery, options) => {
-      queryParams.surround = { query: surroundQuery, ...options }
-      return fetcher(query) as Promise<Array<T>>
-    },
-    count: () => {
-      queryParams.count = true
-      return fetcher(query) as Promise<number>
-    },
+    find: () => fetcher(query as unknown as ContentQueryBuilder<T>).then(resolveResult),
+    findOne: () => fetcher($set('first')(true)).then(resolveResult),
+    count: () => fetcher($set('count')(true)).then(resolveResult),
     // locale
-    locale: (_locale: string) => query.where({ _locale })
+    locale: (_locale: string) => query.where({ _locale }),
+    withSurround: $set('surround', (surroundQuery, options) => ({ query: surroundQuery, ...options })),
+    withDirConfig: () => $set('dirConfig')(true)
+  }
+
+  if (opts.legacy) {
+    // @ts-ignore
+    query.findSurround = (surroundQuery, options) => {
+      return query.withSurround(surroundQuery, options).findOne().then(resolveResult)
+    }
+
+    return query as QueryBuilder<T>
   }
 
-  return query
+  return query as ContentQueryBuilder<T>
 }
diff --git a/src/runtime/server/api/navigation.ts b/src/runtime/server/api/navigation.ts
index 73e6539b9..ba0c6516d 100644
--- a/src/runtime/server/api/navigation.ts
+++ b/src/runtime/server/api/navigation.ts
@@ -32,9 +32,11 @@ export default defineEventHandler(async (event) => {
     })
     .find()
 
-  const dirConfigs = await serverQueryContent(event).where({ _path: /\/_dir$/i, _partial: true }).find()
+  const dirConfigs = await serverQueryContent(event)
+    .where({ _path: /\/_dir$/i, _partial: true })
+    .find()
 
-  const configs = dirConfigs.reduce((configs, conf: ParsedContent) => {
+  const configs = (dirConfigs?.result || dirConfigs).reduce((configs, conf: ParsedContent) => {
     if (conf.title?.toLowerCase() === 'dir') {
       conf.title = undefined
     }
@@ -47,5 +49,5 @@ export default defineEventHandler(async (event) => {
     return configs
   }, {} as Record<string, ParsedContentMeta>)
 
-  return createNav(contents as ParsedContentMeta[], configs)
+  return createNav((contents?.result || contents) as ParsedContentMeta[], configs)
 })
diff --git a/src/runtime/server/api/query.ts b/src/runtime/server/api/query.ts
index cf7e3ff0b..63572593c 100644
--- a/src/runtime/server/api/query.ts
+++ b/src/runtime/server/api/query.ts
@@ -1,29 +1,26 @@
 import { createError, defineEventHandler } from 'h3'
-import { join } from 'pathe'
 import { serverQueryContent } from '../storage'
 import { getContentQuery } from '../../utils/query'
+import { useRuntimeConfig } from '#imports'
 
 export default defineEventHandler(async (event) => {
   const query = getContentQuery(event)
+  const { advanceQuery } = useRuntimeConfig().public.content.experimental
 
   if (query.first) {
-    const content = await serverQueryContent(event, query).findOne()
-
-    // Try to find `_dir` file before throwing 404
-    const path = content?._path || query.where?.find(w => w._path)?._path as string
-    if (path) {
-      const _dir = await serverQueryContent(event).where({ _path: join(path, '_dir') }).without('_').findOne()
-      if (_dir && !Array.isArray(_dir)) {
-        return {
-          _path: path,
-          ...(content || {}),
-          _dir
-        }
-      }
+    let contentQuery = serverQueryContent(event, query)
+
+    if (!advanceQuery) {
+      contentQuery = contentQuery.withDirConfig()
     }
 
+    const content = await contentQuery.findOne()
+
+    const _result = advanceQuery ? content?.result : content
+    // @ts-ignore
+    const missing = !_result && !content?.dirConfig?.navigation?.redirect && !content?._dir?.navigation?.redirect
     // If no documents matchs and using findOne()
-    if (!content) {
+    if (missing) {
       throw createError({
         statusMessage: 'Document not found!',
         statusCode: 404,
@@ -38,11 +35,8 @@ export default defineEventHandler(async (event) => {
   }
 
   if (query.count) {
-    const count = await serverQueryContent(event, query).count()
-    return count
+    return serverQueryContent(event, query).count()
   }
 
-  const contents = await serverQueryContent(event, query).find()
-
-  return contents
+  return serverQueryContent(event, query).find()
 })
diff --git a/src/runtime/server/content-index.ts b/src/runtime/server/content-index.ts
index 5cd0d32c4..9d7c95823 100644
--- a/src/runtime/server/content-index.ts
+++ b/src/runtime/server/content-index.ts
@@ -1,5 +1,6 @@
 import type { H3Event } from 'h3'
-import type { ParsedContent, QueryBuilder } from '../types'
+import type { ParsedContent } from '../types'
+import type { ContentQueryBuilder } from '../types/query'
 import { isPreview } from './preview'
 import { cacheStorage, getContent, getContentsList } from './storage'
 import { useRuntimeConfig } from '#imports'
@@ -27,12 +28,12 @@ export async function getContentIndex (event: H3Event) {
   return contentIndex
 }
 
-export async function getIndexedContentsList<T = ParsedContent> (event: H3Event, query: QueryBuilder<T>): Promise<T[]> {
+export async function getIndexedContentsList<T = ParsedContent> (event: H3Event, query: ContentQueryBuilder<T>): Promise<T[]> {
   const params = query.params()
   const path = params?.where?.find(wh => wh._path)?._path
 
   // Read from Index is not preview and path is string or RegExp
-  if (!isPreview(event) && (typeof path === 'string' || path instanceof RegExp)) {
+  if (!isPreview(event) && !params.surround && !params.dirConfig && (typeof path === 'string' || path instanceof RegExp)) {
     const index = await getContentIndex(event)
     const keys = Object.keys(index)
       .filter(key => (path as any).test ? (path as any).test(key) : key === String(path))
diff --git a/src/runtime/server/storage.ts b/src/runtime/server/storage.ts
index 81eb0f907..7e85d53d6 100644
--- a/src/runtime/server/storage.ts
+++ b/src/runtime/server/storage.ts
@@ -4,12 +4,13 @@ import { hash as ohash } from 'ohash'
 import type { H3Event } from 'h3'
 // eslint-disable-next-line import/no-named-as-default
 import defu from 'defu'
-import type { QueryBuilderParams, ParsedContent, QueryBuilder, ContentTransformer } from '../types'
+import type { ParsedContent, ContentTransformer } from '../types'
 import { createQuery } from '../query/query'
-import { createPipelineFetcher } from '../query/match/pipeline'
 import { transformContent } from '../transformers'
 import { makeIgnored } from '../utils/config'
 import type { ModuleOptions } from '../../module'
+import { createPipelineFetcher } from '../query/match/pipeline'
+import { ContentQueryBuilder, ContentQueryBuilderParams } from '../types/query'
 import { getPreview, isPreview } from './preview'
 import { getIndexedContentsList } from './content-index'
 // @ts-ignore
@@ -194,18 +195,21 @@ export const parseContent = async (id: string, content: StorageValue, opts: Pars
   return result
 }
 
-export const createServerQueryFetch = <T = ParsedContent>(event: H3Event) => (query: QueryBuilder<T>) => {
+export const createServerQueryFetch = <T = ParsedContent>(event: H3Event) => (query: ContentQueryBuilder<T>) => {
   return createPipelineFetcher<T>(() => getIndexedContentsList<T>(event, query))(query)
 }
 
 /**
  * Query contents
  */
-export function serverQueryContent<T = ParsedContent>(event: H3Event): QueryBuilder<T>;
-export function serverQueryContent<T = ParsedContent>(event: H3Event, params?: QueryBuilderParams): QueryBuilder<T>;
-export function serverQueryContent<T = ParsedContent>(event: H3Event, query?: string, ...pathParts: string[]): QueryBuilder<T>;
-export function serverQueryContent<T = ParsedContent> (event: H3Event, query?: string | QueryBuilderParams, ...pathParts: string[]) {
-  const queryBuilder = createQuery<T>(createServerQueryFetch(event), typeof query !== 'string' ? query || {} : {})
+export function serverQueryContent<T = ParsedContent>(event: H3Event): ContentQueryBuilder<T>;
+export function serverQueryContent<T = ParsedContent>(event: H3Event, params?: ContentQueryBuilderParams): ContentQueryBuilder<T>;
+export function serverQueryContent<T = ParsedContent>(event: H3Event, query?: string, ...pathParts: string[]): ContentQueryBuilder<T>;
+export function serverQueryContent<T = ParsedContent> (event: H3Event, query?: string | ContentQueryBuilderParams, ...pathParts: string[]) {
+  const { advanceQuery } = useRuntimeConfig().public.content.experimental
+  const queryBuilder = advanceQuery
+    ? createQuery<T>(createServerQueryFetch(event), { initialParams: typeof query !== 'string' ? query || {} : {}, legacy: false })
+    : createQuery<T>(createServerQueryFetch(event), { initialParams: typeof query !== 'string' ? query || {} : {}, legacy: true })
   let path: string
 
   if (typeof query === 'string') {
diff --git a/src/runtime/transformers/csv/parser.ts b/src/runtime/transformers/csv/parser.ts
index 7addd0028..1ede90490 100644
--- a/src/runtime/transformers/csv/parser.ts
+++ b/src/runtime/transformers/csv/parser.ts
@@ -2,6 +2,19 @@ import type { Effects, State, Code, TokenizeContext } from 'micromark-util-types
 import { markdownLineEnding, markdownSpace } from 'micromark-util-character'
 import { createTokenizer } from './create-tokenizer'
 
+declare module 'micromark-util-types' {
+  interface TokenTypeMap {
+    row: 'row'
+    column: 'column'
+    columnSeparator: 'columnSeparator'
+    newline: 'newline'
+    quotedData: 'quotedData'
+    quotedDataChunk: 'quotedDataChunk'
+    quoteFence: 'quoteFence'
+    emptyLine: 'emptyLine'
+  }
+}
+
 function initializeDocument (this: TokenizeContext, effects: Effects) {
   // eslint-disable-next-line @typescript-eslint/no-this-alias
   const self = this
@@ -9,7 +22,7 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
 
   return enterRow
 
-  function enterRow (code: Code): State | void {
+  function enterRow (code: Code): State {
     return effects.attempt(
       { tokenize: attemptLastLine },
       (code) => {
@@ -20,15 +33,15 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
         effects.enter('row')
         return enterColumn(code)
       }
-    )(code)
+    )(code)!
   }
 
-  function enterColumn (code: Code): State | void {
+  function enterColumn (code: Code): State {
     effects.enter('column')
     return content(code)
   }
 
-  function content (code: Code): State | void {
+  function content (code: Code): State {
     if (code === null) {
       effects.exit('column')
       effects.exit('row')
@@ -66,12 +79,12 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
   }
 
   // data
-  function data (code: Code): State | void {
+  function data (code: Code): State {
     effects.enter('data')
     return dataChunk(code)
   }
 
-  function dataChunk (code: Code): State | void {
+  function dataChunk (code: Code): State {
     if (code === null || markdownLineEnding(code) || code === delimiter) {
       effects.exit('data')
       return content(code)
@@ -83,15 +96,15 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
     return dataChunk
   }
 
-  function escapeCharacter (code: Code): State | void {
+  function escapeCharacter (code: Code): State {
     effects.consume(code)
-    return function (code: Code): State | void {
+    return function (code: Code): State {
       effects.consume(code)
       return content
     }
   }
 
-  function quotedData (code: Code): State | void {
+  function quotedData (code: Code): State {
     effects.enter('quotedData')
     effects.enter('quotedDataChunk')
     effects.consume(code)
@@ -99,26 +112,26 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
     return quotedDataChunk
   }
 
-  function quotedDataChunk (code: Code): State | void {
+  function quotedDataChunk (code: Code): State {
     if (code === 92 /** \ */) {
       return escapeCharacter(code)
     }
     if (code === 34) {
       return effects.attempt(
         { tokenize: attemptDoubleQuote },
-        (code: Code): State | void => {
+        (code: Code): State => {
           effects.exit('quotedDataChunk')
           effects.enter('quotedDataChunk')
           return quotedDataChunk(code)
         },
-        (code: Code): State | void => {
+        (code: Code): State => {
           effects.consume(code)
           effects.exit('quotedDataChunk')
           effects.exit('quotedData')
 
           return content
         }
-      )(code)
+      )(code)!
     }
     effects.consume(code)
     return quotedDataChunk
@@ -128,46 +141,46 @@ function initializeDocument (this: TokenizeContext, effects: Effects) {
 function attemptDoubleQuote (effects: Effects, ok: State, nok: State) {
   return startSequence
 
-  function startSequence (code: Code): State | void {
+  function startSequence (code: Code): State {
     if (code !== 34) {
-      return nok(code)
+      return nok(code)!
     }
     effects.enter('quoteFence')
     effects.consume(code)
     return sequence
   }
 
-  function sequence (code: Code): State | void {
+  function sequence (code: Code): State {
     if (code !== 34) {
-      return nok(code)
+      return nok(code)!
     }
     effects.consume(code)
     effects.exit('quoteFence')
-    return (code: Code): State | void => ok(code)
+    return (code: Code): State => ok(code)!
   }
 }
 
 function attemptLastLine (effects: Effects, ok: State, nok: State) {
-  return enterLine
+  return enterLine as State
 
-  function enterLine (code: Code): State | void {
+  function enterLine (code: Code): State {
     if (!markdownSpace(code) && code !== null) {
-      return nok(code)
+      return nok(code)!
     }
     effects.enter('emptyLine')
     return continueLine(code)
   }
 
-  function continueLine (code: Code): State | void {
+  function continueLine (code: Code): State {
     if (markdownSpace(code)) {
       effects.consume(code)
       return continueLine
     }
     if (code === null) {
       effects.exit('emptyLine')
-      return ok(code)
+      return ok(code)!
     }
-    return nok(code)
+    return nok(code)!
   }
 }
 
diff --git a/src/runtime/transformers/json.ts b/src/runtime/transformers/json.ts
index 78b978464..628372f47 100644
--- a/src/runtime/transformers/json.ts
+++ b/src/runtime/transformers/json.ts
@@ -1,5 +1,5 @@
-import { destr } from 'destr'
-import { ParsedContent } from '../types'
+import destr from 'destr'
+import type { ParsedContent } from '../types'
 import { defineTransformer } from './utils'
 
 export default defineTransformer({
diff --git a/src/runtime/transformers/markdown.ts b/src/runtime/transformers/markdown.ts
index a3ca8daca..a504b1923 100644
--- a/src/runtime/transformers/markdown.ts
+++ b/src/runtime/transformers/markdown.ts
@@ -24,7 +24,7 @@ export default defineTransformer({
       rehype: {
         options: {
           handlers: {
-            link
+            link: link as any
           }
         },
         plugins: config.rehypePlugins
diff --git a/src/runtime/types/api.ts b/src/runtime/types/api.ts
new file mode 100644
index 000000000..eb4c7aa3a
--- /dev/null
+++ b/src/runtime/types/api.ts
@@ -0,0 +1,24 @@
+export interface ContentQueryFindResponse<T> {
+  result: Array<T>
+  skip: number
+  limit: number
+  total: number
+}
+
+export interface ContentQueryFindOneResponse<T> {
+  result: T | undefined
+}
+
+export interface ContentQueryCountResponse {
+  result: number
+}
+
+export type ContentQueryResponse<T> = ContentQueryFindResponse<T> | ContentQueryFindOneResponse<T> | ContentQueryCountResponse
+
+export interface ContentQueryWithSurround<T> {
+  surround: Array<T | null>
+}
+
+export interface ContentQueryWithDirConfig {
+  dirConfig: Record<string, any>
+}
diff --git a/src/runtime/types.d.ts b/src/runtime/types/index.d.ts
similarity index 99%
rename from src/runtime/types.d.ts
rename to src/runtime/types/index.d.ts
index 1eefec5a6..3a5ffc654 100644
--- a/src/runtime/types.d.ts
+++ b/src/runtime/types/index.d.ts
@@ -404,7 +404,7 @@ export interface QueryBuilderWhere extends Partial<Record<keyof ParsedContentInt
     })
     ```
    **/
-  $in?: Array<string | number | boolean>
+  $in?: string | Array<string | number | boolean>
 
   [key: string]: string | number | boolean | RegExp | QueryBuilderWhere | Array<string | number | boolean | QueryBuilderWhere>
 }
diff --git a/src/runtime/types/query.d.ts b/src/runtime/types/query.d.ts
new file mode 100644
index 000000000..9460d418f
--- /dev/null
+++ b/src/runtime/types/query.d.ts
@@ -0,0 +1,351 @@
+import { ContentQueryFindResponse, ContentQueryFindOneResponse, ContentQueryCountResponse, ContentQueryWithSurround, ContentQueryWithDirConfig } from './api'
+import { ContentQueryCountResponse, ContentQueryResponse, ParsedContentInternalMeta, ParsedContentMeta } from '.'
+/**
+ * Query
+ */
+
+export interface ContentQuerySortParams {
+  /**
+   * Locale specifier for sorting
+   * A string with a BCP 47 language tag
+   *
+   * @default undefined
+   */
+  $locale?: string
+  /**
+   * Whether numeric collation should be used, such that "1" < "2" < "10".
+   * Possible values are `true` and `false`;
+   *
+   * @default false
+   */
+  $numeric?: boolean
+  /**
+   * Whether upper case or lower case should sort first.
+   * Possible values are `"upper"`, `"lower"`, or `"false"`
+   *
+   * @default "depends on locale"
+   */
+  $caseFirst?: 'upper' | 'lower' | 'false'
+  /**
+   * Which differences in the strings should lead to non-zero result values. Possible values are:
+   *  - "base": Only strings that differ in base letters compare as unequal. Examples: a ≠ b, a = á, a = A.
+   *  - "accent": Only strings that differ in base letters or accents and other diacritic marks compare as unequal. Examples: a ≠ b, a ≠ á, a = A.
+   *  - "case": Only strings that differ in base letters or case compare as unequal. Examples: a ≠ b, a = á, a ≠ A.
+   *  - "variant": Strings that differ in base letters, accents and other diacritic marks, or case compare as unequal. Other differences may also be taken into consideration. Examples: a ≠ b, a ≠ á, a ≠ A.
+   *
+   * @default "variant"
+   */
+  $sensitivity?: 'base' | 'accent' | 'case' | 'variant'
+}
+
+export interface ContentQuerySortFields {
+  [field: string]: -1 | 1
+}
+
+export type ContentQuerySortOptions = ContentQuerySortParams | ContentQuerySortFields
+
+export interface ContentQueryBuilderWhere extends Partial<Record<keyof ParsedContentInternalMeta, string | number | boolean | RegExp | ContentQueryBuilderWhere>> {
+  /**
+   * Match only if all of nested conditions are true
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      $and: [
+        { score: { $gte: 5 } },
+        { score: { $lte: 10 } }
+      ]
+    })
+    ```
+   **/
+  $and?: ContentQueryBuilderWhere[]
+  /**
+   * Match if any of nested conditions is true
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      $or: [
+        { score: { $gt: 5 } },
+        { score: { $lt: 3 } }
+      ]
+    })
+    ```
+   **/
+  $or?: ContentQueryBuilderWhere[]
+  /**
+   * Match is condition is false
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $not: 'Hello World'
+      }
+    })
+    ```
+   **/
+  $not?: string | number | boolean | RegExp | ContentQueryBuilderWhere
+  /**
+   * Match if item equals condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $eq: 'Hello World'
+      }
+    })
+    ```
+   **/
+  $eq?: string | number | boolean | RegExp
+  /**
+   * Match if item not equals condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      score: {
+        $ne: 100
+      }
+    })
+    ```
+   **/
+  $ne?: string | number | boolean | RegExp
+  /**
+   * Check if item is greater than condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      score: {
+        $gt: 99.5
+      }
+    })
+    ```
+   */
+  $gt?: number
+  /**
+   * Check if item is greater than or equal to condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      score: {
+        $gte: 99.5
+      }
+    })
+    ```
+   */
+  $gte?: number
+  /**
+   * Check if item is less than condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      score: {
+        $lt: 99.5
+      }
+    })
+    ```
+   */
+  $lt?: number
+  /**
+   * Check if item is less than or equal to condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      score: {
+        $lte: 99.5
+      }
+    })
+    ```
+   */
+  $lte?: number
+  /**
+   * Provides regular expression capabilities for pattern matching strings.
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $regex: /^foo/
+      }
+    })
+    ```
+   */
+  $regex?: RegExp | string
+  /**
+   * Match if type of item equals condition
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      field: {
+        $type: 'boolean'
+      }
+    })
+    ```
+   */
+  $type?: string
+  /**
+   * Check key existence
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      tag: {
+        $exists: false
+      }
+    })
+    ```
+   */
+  $exists?: boolean
+  /**
+   * Match if item contains every condition or math every rule in condition array
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $contains: ['Hello', 'World']
+      }
+    })
+    ```
+   **/
+  $contains?: Array<string | number | boolean> | string | number | boolean
+  /**
+   * Match if item contains at least one rule from condition array
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $containsAny: ['Hello', 'World']
+      }
+    })
+    ```
+   */
+  $containsAny?: Array<string | number | boolean>
+  /**
+   * Ignore case contains
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      title: {
+        $icontains: 'hello world'
+      }
+    })
+    ```
+   **/
+  $icontains?: string
+  /**
+   * Match if item is in condition array
+   *
+   * @example
+    ```ts
+    queryContent().where({
+      category: {
+        $in: ['sport', 'nature', 'travel']
+      }
+    })
+    ```
+   **/
+  $in?: Array<string | number | boolean>
+
+  [key: string]: string | number | boolean | RegExp | ContentQueryBuilderWhere | Array<string | number | boolean | ContentQueryBuilderWhere>
+}
+
+export interface ContentQueryBuilderParams {
+  first?: boolean
+  skip?: number
+  limit?: number
+  only?: string[]
+  without?: string[]
+  sort?: ContentQuerySortOptions[]
+  where?: ContentQueryBuilderWhere[]
+  surround?: {
+    query: string | ContentQueryBuilderWhere
+    before?: number
+    after?: number
+  }
+
+  [key: string]: any
+}
+
+export interface ContentQueryBuilder<T = ParsedContentMeta, Y = {}> {
+  /**
+   * Select a subset of fields
+   */
+  only<K extends keyof T | string>(keys: K): ContentQueryBuilder<Pick<T, K>, Y>
+  only<K extends (keyof T | string)[]>(keys: K): ContentQueryBuilder<Pick<T, K[number]>, Y>
+
+  /**
+   * Remove a subset of fields
+   */
+  without<K extends keyof T | string>(keys: K): ContentQueryBuilder<Omit<T, K>, Y>
+  without<K extends (keyof T | string)[]>(keys: K): ContentQueryBuilder<Omit<T, K[number]>, Y>
+
+  /**
+   * Filter results
+   */
+  where(query: ContentQueryBuilderWhere): ContentQueryBuilder<T, Y>
+
+  /**
+   * Sort results
+   */
+  sort(options: ContentQuerySortOptions): ContentQueryBuilder<T, Y>
+
+  /**
+   * Limit number of results
+   */
+  limit(count: number): ContentQueryBuilder<T, Y>
+
+  /**
+   * Skip number of results
+   */
+  skip(count: number): ContentQueryBuilder<T, Y>
+
+  /**
+   * Retrieve query builder params
+   * @internal
+   */
+  params: () => readonly ContentQueryBuilderParams
+
+  /**
+   * Filter contents based on locale
+   */
+  locale(locale: string): ContentQueryBuilder<T, Y>
+
+  /**
+   * Fetch list of contents
+   */
+  find(): Promise<ContentQueryFindResponse<T> & Y>
+
+  /**
+   * Fetch first matched content
+   */
+  findOne(): Promise<ContentQueryFindOneResponse<T> & Y>
+
+  /**
+   * Count matched contents
+   */
+  count(): Promise<ContentQueryCountResponse>
+
+  /**
+   * Fetch sorround contents
+   */
+  withSurround(query: string | ContentQueryBuilderWhere, options?: Partial<{ before: number; after: number }>): ContentQueryBuilder<T, ContentQueryWithSurround<T>>
+
+  /**
+   * Fetch sorround contents
+   */
+  withDirConfig(): ContentQueryBuilder<T, ContentQueryWithDirConfig>
+}
+
+
+export type ContentQueryFetcher<T> = (query: ContentQueryBuilder<T>) => Promise<ContentQueryResponse>
+
diff --git a/src/runtime/utils/query.ts b/src/runtime/utils/query.ts
index eeed98b5a..647527986 100644
--- a/src/runtime/utils/query.ts
+++ b/src/runtime/utils/query.ts
@@ -1,5 +1,5 @@
-import { getQuery, H3Event, createError } from 'h3'
-import { QueryBuilderParams, QueryBuilderWhere } from '../types'
+import { getQuery, type H3Event, createError } from 'h3'
+import type { ContentQueryBuilderParams, ContentQueryBuilderWhere } from '../types/query'
 import { jsonParse, jsonStringify } from './json'
 
 const parseJSONQueryParams = (body: string) => {
@@ -10,7 +10,7 @@ const parseJSONQueryParams = (body: string) => {
   }
 }
 
-export const encodeQueryParams = (params: QueryBuilderParams) => {
+export const encodeQueryParams = (params: ContentQueryBuilderParams) => {
   let encoded = jsonStringify(params)
   encoded = typeof Buffer !== 'undefined' ? Buffer.from(encoded).toString('base64') : btoa(encoded)
 
@@ -32,8 +32,8 @@ export const decodeQueryParams = (encoded: string) => {
   return parseJSONQueryParams(typeof Buffer !== 'undefined' ? Buffer.from(encoded, 'base64').toString() : atob(encoded))
 }
 
-const memory: Record<string, QueryBuilderParams> = {}
-export const getContentQuery = (event: H3Event): QueryBuilderParams => {
+const memory: Record<string, ContentQueryBuilderParams> = {}
+export const getContentQuery = (event: H3Event): ContentQueryBuilderParams => {
   const { params } = event.context.params || {}
   if (params) {
     return decodeQueryParams(params.replace(/.json$/, ''))
@@ -47,7 +47,7 @@ export const getContentQuery = (event: H3Event): QueryBuilderParams => {
     memory[qid] = parseJSONQueryParams(decodeURIComponent(query._params))
 
     if (memory[qid].where && !Array.isArray(memory[qid].where)) {
-      memory[qid].where = [memory[qid].where as any as QueryBuilderWhere]
+      memory[qid].where = [memory[qid].where as any as ContentQueryBuilderWhere]
     }
 
     return memory[qid]
diff --git a/test/__snapshots__/basic-aq.test.ts.snap b/test/__snapshots__/basic-aq.test.ts.snap
new file mode 100644
index 000000000..6dea4b372
--- /dev/null
+++ b/test/__snapshots__/basic-aq.test.ts.snap
@@ -0,0 +1,86 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Basic usage > Content Queries > Get contents index > basic-index-body 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "type": "text",
+          "value": "Index",
+        },
+      ],
+      "props": {
+        "id": "index",
+      },
+      "tag": "h1",
+      "type": "element",
+    },
+    {
+      "children": [
+        {
+          "type": "text",
+          "value": "Hello World",
+        },
+      ],
+      "props": {},
+      "tag": "p",
+      "type": "element",
+    },
+  ],
+  "toc": {
+    "depth": 2,
+    "links": [],
+    "searchDepth": 2,
+    "title": "",
+  },
+  "type": "root",
+}
+`;
+
+exports[`Basic usage > Navigation > Get cats navigation > basic-navigation-cats 1`] = `
+[
+  {
+    "_path": "/cats",
+    "children": [
+      {
+        "_path": "/cats/bombay",
+        "title": "Bombay",
+      },
+      {
+        "_path": "/cats",
+        "title": "Cats",
+      },
+      {
+        "_path": "/cats/persian",
+        "title": "Persian",
+      },
+      {
+        "_path": "/cats/ragdoll",
+        "title": "Ragdoll",
+      },
+    ],
+    "title": "Cats list",
+  },
+]
+`;
+
+exports[`Basic usage > Navigation > Get dogs navigation > basic-navigation-dogs 1`] = `
+[
+  {
+    "_path": "/dogs",
+    "children": [
+      {
+        "_path": "/dogs/bulldog",
+        "title": "Bulldog",
+      },
+      {
+        "_path": "/dogs/german-shepherd",
+        "title": "German Shepherd",
+      },
+    ],
+    "icon": "🐶",
+    "title": "Dogs List",
+  },
+]
+`;
diff --git a/test/basic-aq.test.ts b/test/basic-aq.test.ts
new file mode 100644
index 000000000..6b693df86
--- /dev/null
+++ b/test/basic-aq.test.ts
@@ -0,0 +1,99 @@
+import { fileURLToPath } from 'url'
+import { test, describe, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils'
+import { testMarkdownParser } from './features/parser-markdown'
+import { testPathMetaTransformer } from './features/transformer-path-meta'
+import { testYamlParser } from './features/parser-yaml'
+import { testNavigation } from './features/navigation'
+// import { testMDCComponent } from './features/mdc-component'
+import { testJSONParser } from './features/parser-json'
+import { testCSVParser } from './features/parser-csv'
+import { testRegex } from './features/regex'
+import { testMarkdownParserExcerpt } from './features/parser-markdown-excerpt'
+import { testParserHooks } from './features/parser-hooks'
+import { testModuleOptions } from './features/module-options'
+import { testContentQuery } from './features/content-query'
+import { testHighlighter } from './features/highlighter'
+import { testMarkdownRenderer } from './features/renderer-markdown'
+import { testParserOptions } from './features/parser-options'
+import { testComponents } from './features/components'
+import { testLocales } from './features/locales'
+import { testIgnores } from './features/ignores'
+
+// const spyConsoleWarn = vi.spyOn(global.console, 'warn')
+
+describe('Basic usage', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/basic-aq', import.meta.url)),
+    server: true,
+    nuxtConfig: {
+      content: {
+        experimental: {
+          advanceQuery: true
+        }
+      }
+    }
+  })
+
+  test('Multi part path', async () => {
+    const html = await $fetch('/features/multi-part-path')
+    expect(html).contains('Persian')
+  })
+
+  test('Japanese path', async () => {
+    const html = await $fetch('/' + encodeURIComponent('こんにちは'))
+    expect(html).contains('🎨 こんにちは')
+  })
+
+  test('Partials specials chars', async () => {
+    const html = await $fetch('/_partial/content-(v2)')
+    expect(html).contains('Content (v2)')
+  })
+
+  test('Partials specials chars', async () => {
+    const html = await $fetch('/_partial/markdown')
+    expect(html).contains('><!--[--> Default title <!--]--></h1>')
+    expect(html).contains('<p><!--[-->p1<!--]--></p>')
+  })
+
+  // test('Warning for invalid file name', () => {
+  //   expect(spyConsoleWarn).toHaveBeenCalled()
+  //   expect(spyConsoleWarn).toHaveBeenCalledWith('Ignoring [content:with-\'invalid\'-char.md]. File name should not contain any of the following characters: \', ", ?, #, /')
+  // })
+
+  testLocales()
+
+  testComponents()
+
+  testContentQuery()
+
+  testNavigation()
+
+  testMarkdownParser()
+
+  testMarkdownRenderer()
+
+  testMarkdownParserExcerpt()
+
+  testYamlParser()
+
+  testCSVParser()
+
+  testJSONParser()
+
+  testPathMetaTransformer()
+
+  // testMDCComponent()
+
+  testRegex()
+
+  testParserHooks()
+
+  testModuleOptions()
+
+  testHighlighter()
+
+  testParserOptions()
+
+  testIgnores()
+})
diff --git a/test/document-driven-aq.test.ts b/test/document-driven-aq.test.ts
new file mode 100644
index 000000000..7cfc21948
--- /dev/null
+++ b/test/document-driven-aq.test.ts
@@ -0,0 +1,77 @@
+import { fileURLToPath } from 'url'
+import { test, describe, expect } from 'vitest'
+import { setup, $fetch, url } from '@nuxt/test-utils'
+
+describe('fixtures:document-driven', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/document-driven-aq', import.meta.url)),
+    server: true
+  })
+
+  test('<title> from front-matter', async () => {
+    const html = await $fetch('/')
+
+    expect(html).contains('<title>Home</title>')
+  })
+
+  test('disabled document driven', async () => {
+    const html = await $fetch('/disabled')
+
+    expect(html).contains('<div>surround: </div>')
+    expect(html).contains('<div>page: </div>')
+  })
+
+  test('disabled surround', async () => {
+    const html = await $fetch('/no-surround')
+
+    expect(html).contains('<div>surround: </div>')
+    expect(html).contains('<div>page: {')
+  })
+
+  test('custom content with path', async () => {
+    const html = await $fetch('/home')
+
+    expect(html).contains('Home')
+    expect(html).contains('Hello World!')
+
+    expect(html).contains('with previous link /')
+    expect(html).contains('with next link /layout')
+  })
+
+  test('custom content with condition', async () => {
+    const html = await $fetch('/custom-search')
+
+    expect(html).contains('FM Data')
+
+    expect(html).contains('with previous link /layout')
+    expect(html).contains('with next link /no-surround')
+  })
+
+  test('useContentHead(): og:image with string', async () => {
+    const html = await $fetch('/fm-data')
+
+    expect(html).contains('<meta property="og:image" content="https://picsum.photos/400/200">')
+  })
+
+  test('useContentHead(): og:image with object', async () => {
+    const html = await $fetch('/og-image')
+
+    expect(html).contains('<meta property="og:image" content="https://picsum.photos/400/200">')
+    expect(html).contains('<meta property="og:image:width" content="400">')
+    expect(html).contains('<meta property="og:image:height" content="200">')
+  })
+
+  test('404 page', async () => {
+    try {
+      await $fetch('/page-not-found')
+    } catch (e: any) {
+      expect(e.response.status).toBe(404)
+      expect(e.response.statusText).toBe('Not Found')
+    }
+  })
+
+  test('redirect in `_dir.yml`', async () => {
+    const response = await fetch(url('/redirect'))
+    expect(response.url).toBe('https://v2.nuxt.com/')
+  })
+})
diff --git a/test/document-driven.test.ts b/test/document-driven.test.ts
index 4c031ab1e..5151d657a 100644
--- a/test/document-driven.test.ts
+++ b/test/document-driven.test.ts
@@ -64,7 +64,7 @@ describe('fixtures:document-driven', async () => {
   test('404 page', async () => {
     try {
       await $fetch('/page-not-found')
-    } catch (e) {
+    } catch (e: any) {
       expect(e.response.status).toBe(404)
       expect(e.response.statusText).toBe('Not Found')
     }
diff --git a/test/features/content-query.ts b/test/features/content-query.ts
index 8220c9a96..53589018e 100644
--- a/test/features/content-query.ts
+++ b/test/features/content-query.ts
@@ -5,21 +5,31 @@ import { hash } from 'ohash'
 export const testContentQuery = () => {
   // @ts-ignore
   const apiBaseUrl = useTestContext().options.nuxtConfig.content?.api?.baseURL || '/api/_content'
+  const resolveResult = (result: any) => {
+    if (!useTestContext().options.nuxtConfig.content?.experimental?.advanceQuery) {
+      if (result?.surround) {
+        return result.surround
+      }
 
+      return result?._id || Array.isArray(result) ? result : result?.result
+    }
+
+    return result.result
+  }
   describe('Content Queries', () => {
     const fetchDocument = (_id: string) => {
       const params = { first: true, where: { _id } }
       const qid = hash(params)
       return $fetch(`${apiBaseUrl}/query/${qid}`, {
         params: { _params: JSON.stringify(params) }
-      })
+      }).then(resolveResult)
     }
     test('List contents', async () => {
       const params = { only: '_id' }
       const qid = hash(params)
       const docs = await $fetch(`${apiBaseUrl}/query/${qid}`, {
         params: { _params: JSON.stringify(params) }
-      })
+      }).then(resolveResult)
 
       const ids = docs.map((doc: any) => doc._id)
 
diff --git a/test/features/locales.ts b/test/features/locales.ts
index b8102f1ef..cba659ab8 100644
--- a/test/features/locales.ts
+++ b/test/features/locales.ts
@@ -4,11 +4,21 @@ import { $fetch, useTestContext } from '@nuxt/test-utils'
 export const testLocales = () => {
   // @ts-ignore
   const apiBaseUrl = useTestContext().options.nuxtConfig.content?.api?.baseURL || '/api/_content'
+  const resolveResult = (result: any) => {
+    if (!useTestContext().options.nuxtConfig.content?.experimental?.advanceQuery) {
+      if (result?.surround) {
+        return result.surround
+      }
 
+      return result?._id || Array.isArray(result) ? result : result?.result
+    }
+
+    return result.result
+  }
   describe('Locales', () => {
     test('Path with multiple locales', async () => {
       const params = { where: [{ _path: '/translated' }] }
-      const content = await $fetch(`${apiBaseUrl}/query`, { params: { _params: JSON.stringify(params) } })
+      const content = await $fetch(`${apiBaseUrl}/query`, { params: { _params: JSON.stringify(params) } }).then(resolveResult)
       assert(content.length === 1)
       assert(content[0]._locale === 'en')
     })
@@ -30,7 +40,7 @@ export const testLocales = () => {
         params: {
           _params: JSON.stringify({ first: true, where: { _id: 'content:index.md' } })
         }
-      })
+      }).then(resolveResult)
 
       expect(index).toMatchObject({
         _locale: 'en'
diff --git a/test/features/query/query.test.ts b/test/features/query/query.test.ts
index 9ab4b61c5..baed91347 100644
--- a/test/features/query/query.test.ts
+++ b/test/features/query/query.test.ts
@@ -1,6 +1,6 @@
 import { assert, describe, expect, test } from 'vitest'
-import { createPipelineFetcher } from '../../../src/runtime/query/match/pipeline'
 import { createQuery } from '../../../src/runtime/query/query'
+import { createPipelineFetcher } from '../../../src/runtime/query/match/pipeline'
 import database from './db.json'
 
 const shuffledDatabase: Array<any> = [...database].sort(() => Math.random() - 0.5)
@@ -8,7 +8,7 @@ const pipelineFetcher = createPipelineFetcher(() => Promise.resolve(shuffledData
 
 describe('Database Provider', () => {
   test('Matches nested exact match', async () => {
-    const result: Array<any> = await createQuery(pipelineFetcher)
+    const result = await createQuery<any>(pipelineFetcher, { legacy: true })
       .where({ 'nested.users.0': 'Ahad' })
       .find()
     assert(result.length > 0)
@@ -17,7 +17,7 @@ describe('Database Provider', () => {
 
   test('Matches nested with operator', async () => {
     // $contains
-    const result: Array<any> = await createQuery(pipelineFetcher)
+    const result: Array<any> = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         'nested.users': {
           $contains: 'Pooya'
@@ -29,33 +29,33 @@ describe('Database Provider', () => {
   })
 
   test('Apply limit', async () => {
-    const first3 = await createQuery(pipelineFetcher).limit(3).find()
+    const first3 = await createQuery(pipelineFetcher, { legacy: true }).limit(3).find()
     assert(first3.length === 3)
   })
 
   test('Apply skip', async () => {
-    const first3 = await createQuery(pipelineFetcher).limit(3).find()
-    const limit3skip2 = await createQuery(pipelineFetcher).skip(2).limit(3).find()
+    const first3 = await createQuery(pipelineFetcher, { legacy: true }).limit(3).find()
+    const limit3skip2 = await createQuery(pipelineFetcher, { legacy: true }).skip(2).limit(3).find()
     assert(limit3skip2[0].id === first3[2].id)
   })
 
   test('Apply sort', async () => {
-    const nameAsc = await createQuery(pipelineFetcher).sort({ name: 1 }).find()
+    const nameAsc = await createQuery(pipelineFetcher, { legacy: true }).sort({ name: 1 }).find()
     assert(nameAsc[0].name === database[0].name)
 
-    const nameDesc = await createQuery(pipelineFetcher).sort({ name: -1 }).find()
+    const nameDesc = await createQuery(pipelineFetcher, { legacy: true }).sort({ name: -1 }).find()
     assert(nameDesc[0].name === database[database.length - 1].name)
   })
 
   test('Apply sort and skip', async () => {
-    const nameAsc = await createQuery(pipelineFetcher).sort({ name: 1 }).skip(2).find()
+    const nameAsc = await createQuery(pipelineFetcher, { legacy: true }).sort({ name: 1 }).skip(2).find()
     assert(nameAsc[0].name === database[2].name)
   })
 
   test('Apply sort $sensitivity', async () => {
     const textOrder = ['aab', 'aaB', 'aAb', 'aAB', 'Aab', 'AaB', 'AAb', 'AAB']
 
-    const sensitivityCase = await createQuery(pipelineFetcher).sort({ text: 1, $sensitivity: 'case' }).find()
+    const sensitivityCase = await createQuery(pipelineFetcher, { legacy: true }).sort({ text: 1, $sensitivity: 'case' }).find()
     textOrder.forEach((text, index) => {
       expect(sensitivityCase[index].text).toBe(text)
     })
@@ -64,12 +64,12 @@ describe('Database Provider', () => {
   test('Apply sort $caseFirst', async () => {
     const textOrder = ['aab', 'aaB', 'aAb', 'aAB', 'Aab', 'AaB', 'AAb', 'AAB']
 
-    const caseLower = await createQuery(pipelineFetcher).sort({ text: 1, $caseFirst: 'lower' }).find()
+    const caseLower = await createQuery(pipelineFetcher, { legacy: true }).sort({ text: 1, $caseFirst: 'lower' }).find()
     textOrder.forEach((text, index) => {
       expect(caseLower[index].text).toBe(text)
     })
     // upper case first
-    const caseUpper = await createQuery(pipelineFetcher).sort({ text: 1, $caseFirst: 'upper' }).find()
+    const caseUpper = await createQuery(pipelineFetcher, { legacy: true }).sort({ text: 1, $caseFirst: 'upper' }).find()
     textOrder.reverse().forEach((text, index) => {
       expect(caseUpper[index].text).toBe(text)
     })
@@ -86,12 +86,12 @@ describe('Database Provider', () => {
     ]
     const fetcher = createPipelineFetcher(() => Promise.resolve(dates.sort(() => 1 - Math.random())))
 
-    const sortedByDate1 = await createQuery(fetcher).sort({ date: 1 }).find()
+    const sortedByDate1 = await createQuery(fetcher, { legacy: true }).sort({ date: 1 }).find()
     ;([...dates].reverse()).forEach(({ date }, index) => {
       expect(sortedByDate1[index].date).toBe(date)
     })
 
-    const sortedByDate0 = await createQuery(fetcher).sort({ date: -1 }).find()
+    const sortedByDate0 = await createQuery(fetcher, { legacy: true }).sort({ date: -1 }).find()
     dates.forEach(({ date }, index) => {
       expect(sortedByDate0[index].date).toBe(date)
     })
@@ -99,14 +99,14 @@ describe('Database Provider', () => {
 
   test('Apply sort $numeric', async () => {
     // sort string alphabetically
-    const nonNumericSort = await createQuery(pipelineFetcher).sort({ numberString: 1 }).find()
+    const nonNumericSort = await createQuery(pipelineFetcher, { legacy: true }).sort({ numberString: 1 }).find()
     const nonNumericOrder = [1, 10, 100, 2, 20, 3, 30, 4]
     nonNumericOrder.forEach((number, index) => {
       expect(nonNumericSort[index].numberString).toBe(String(number))
     })
 
     // sort string numerically
-    const numericSort = await createQuery(pipelineFetcher).sort({ numberString: 1, $numeric: true }).find()
+    const numericSort = await createQuery(pipelineFetcher, { legacy: true }).sort({ numberString: 1, $numeric: true }).find()
     const numericOrder = [1, 2, 3, 4, 10, 20, 30, 100]
     numericOrder.forEach((number, index) => {
       expect(numericSort[index].numberString).toBe(String(number))
@@ -115,7 +115,7 @@ describe('Database Provider', () => {
 
   test('Sort Nullable fields', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, name: 'Saman' }, { id: 2, name: 'Ebi' }, { id: 3, name: 'Narges' }, { id: 4, name: null }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .sort({ name: 1 })
       .find()
 
@@ -126,7 +126,7 @@ describe('Database Provider', () => {
   })
 
   test('Apply $in', async () => {
-    const result = await createQuery(pipelineFetcher)
+    const result = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         category: { $in: 'c1' }
       })
@@ -135,7 +135,7 @@ describe('Database Provider', () => {
   })
 
   test('Apply $in array', async () => {
-    const result = await createQuery(pipelineFetcher)
+    const result = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         category: { $in: ['c1', 'c3'] }
       })
@@ -144,7 +144,7 @@ describe('Database Provider', () => {
   })
 
   test('Apply $or + $in', async () => {
-    const result = await createQuery(pipelineFetcher)
+    const result = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         $or: [{ category: { $in: 'c1' } }, { category: { $in: 'c2' } }]
       })
@@ -153,7 +153,7 @@ describe('Database Provider', () => {
   })
 
   test('Apply $contains string', async () => {
-    const result = await createQuery(pipelineFetcher)
+    const result = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         quote: { $contains: ['best', 'way'] }
       })
@@ -163,7 +163,7 @@ describe('Database Provider', () => {
   })
 
   test('Apply $containsAny string', async () => {
-    const result = await createQuery(pipelineFetcher)
+    const result = await createQuery(pipelineFetcher, { legacy: true })
       .where({
         author: { $containsAny: ['Wilson', 'William'] }
       })
@@ -176,7 +176,7 @@ describe('Database Provider', () => {
 
   test('Surround with path (default)', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .findSurround('/b')
 
     assert(result[0]._path === '/a')
@@ -185,7 +185,7 @@ describe('Database Provider', () => {
 
   test('Surround more that 1 item with path', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .findSurround('/b', { before: 2, after: 1 })
 
     assert((result as Array<any>).length === 3)
@@ -196,7 +196,7 @@ describe('Database Provider', () => {
 
   test('Surround with 0 item before', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .findSurround('/b', { before: 0, after: 1 })
 
     assert((result as Array<any>).length === 1)
@@ -205,7 +205,7 @@ describe('Database Provider', () => {
 
   test('Surround with 0 item after', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .findSurround('/b', { before: 1, after: 0 })
 
     assert((result as Array<any>).length === 1)
@@ -214,7 +214,7 @@ describe('Database Provider', () => {
 
   test('Surround with object', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .findSurround({ id: 3 }, { before: 2, after: 1 })
 
     assert((result as Array<any>).length === 3)
@@ -225,7 +225,7 @@ describe('Database Provider', () => {
 
   test('Surround and using only method', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .only(['_path'])
       .findSurround({ id: 3 }, { before: 2, after: 1 })
 
@@ -237,7 +237,7 @@ describe('Database Provider', () => {
 
   test('Surround and using without method', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .without('id')
       .findSurround({ id: 3 }, { before: 2, after: 1 })
 
@@ -250,7 +250,7 @@ describe('Database Provider', () => {
   test('Count items', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
 
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .count()
 
     assert(result === 3)
@@ -259,7 +259,7 @@ describe('Database Provider', () => {
   test('Count items with where condition', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
 
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .where({ _path: { $contains: 'b' } })
       .count()
 
@@ -269,7 +269,7 @@ describe('Database Provider', () => {
   test('Count items with where condition and without method', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
 
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .where({ _path: { $contains: 'b' } })
       .without('id')
       .count()
@@ -280,7 +280,7 @@ describe('Database Provider', () => {
   test('Count items with where condition and only method', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, _path: '/a' }, { id: 2, _path: '/b' }, { id: 3, _path: '/c' }] as any[]))
 
-    const result = await createQuery(fetcher)
+    const result = await createQuery(fetcher, { legacy: true })
       .where({ _path: { $contains: 'b' } })
       .only(['_path'])
       .count()
@@ -290,7 +290,7 @@ describe('Database Provider', () => {
 
   test('Chain multiple where conditions', async () => {
     const fetcher = createPipelineFetcher(() => Promise.resolve([{ id: 1, path: '/a' }, { id: 2, path: '/b' }, { id: 3, path: '/c' }] as any[]))
-    const query = createQuery(fetcher).where({ id: { $in: [1, 2] } })
+    const query = createQuery(fetcher, { legacy: true }).where({ id: { $in: [1, 2] } })
     const singleWhereResult = await query.find()
 
     assert((singleWhereResult as Array<any>).length === 2)
@@ -305,7 +305,7 @@ describe('Database Provider', () => {
   })
 
   test('Select specific keys', async () => {
-    const query = createQuery(pipelineFetcher)
+    const query = createQuery(pipelineFetcher, { legacy: true })
       .where({ id: { $in: [1, 2] } })
       .only(['name', 'id', '_'])
     const result = await query.find()
@@ -317,13 +317,13 @@ describe('Database Provider', () => {
   })
 
   test('Drop specific keys', async () => {
-    const query = createQuery(pipelineFetcher)
+    const query = createQuery(pipelineFetcher, { legacy: true })
       .where({ id: { $in: [1, 2] } })
       .without(['name', '_'])
     const result = await query.find()
 
     expect(result.length).toBeGreaterThan(0)
-    result.forEach((item) => {
+    result.forEach((item: any) => {
       expect(item.id).toBeDefined()
       expect(item.name).toBeUndefined()
       expect(item._deleted).toBeUndefined()
diff --git a/test/features/regex.ts b/test/features/regex.ts
index ebc86e4ea..f13e2aa28 100644
--- a/test/features/regex.ts
+++ b/test/features/regex.ts
@@ -6,6 +6,17 @@ import { jsonStringify } from '../../src/runtime/utils/json'
 export const testRegex = () => {
   // @ts-ignore
   const apiBaseUrl = useTestContext().options.nuxtConfig.content?.api?.baseURL || '/api/_content'
+  const resolveResult = (result: any) => {
+    if (!useTestContext().options.nuxtConfig.content?.experimental?.advanceQuery) {
+      if (result?.surround) {
+        return result.surround
+      }
+
+      return result?._id || Array.isArray(result) ? result : result?.result
+    }
+
+    return result.result
+  }
   describe('Regex queries', () => {
     test('Get cats with regex', async () => {
       const params = { where: { _path: /^\/cats/ } }
@@ -13,7 +24,7 @@ export const testRegex = () => {
         params: {
           _params: jsonStringify(params)
         }
-      })
+      }).then(resolveResult)
 
       expect(list.length).greaterThan(0)
       for (const item of list) {
diff --git a/test/fixtures/basic-aq/.nuxtrc b/test/fixtures/basic-aq/.nuxtrc
new file mode 100644
index 000000000..ab46aed67
--- /dev/null
+++ b/test/fixtures/basic-aq/.nuxtrc
@@ -0,0 +1 @@
+imports.autoImport=false
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/addons/nitro-plugin.ts b/test/fixtures/basic-aq/addons/nitro-plugin.ts
new file mode 100644
index 000000000..25fbbb10f
--- /dev/null
+++ b/test/fixtures/basic-aq/addons/nitro-plugin.ts
@@ -0,0 +1,19 @@
+import { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'
+
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('content:file:beforeParse', (file) => {
+    if (file._id.endsWith('.md')) {
+      if (file.body.startsWith('---')) {
+        const lines = file.body.split('\n')
+        lines.splice(1, 0, '__beforeParse: true')
+        file.body = lines.join('\n')
+      } else {
+        file.body = '---\n__beforeParse: true\n---\n' + file.body
+      }
+    }
+  })
+
+  nitroApp.hooks.hook('content:file:afterParse', (file) => {
+    file.__afterParse = true
+  })
+})
diff --git a/test/fixtures/basic-aq/components/PropLogger.vue b/test/fixtures/basic-aq/components/PropLogger.vue
new file mode 100644
index 000000000..a62f08b86
--- /dev/null
+++ b/test/fixtures/basic-aq/components/PropLogger.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="prop-a">
+      {{ a }}
+    </div>
+    <div class="prop-b">
+      {{ b }}
+    </div>
+    <div class="prop-c">
+      {{ c }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  a: {
+    type: String,
+    default: 'EMPTY'
+  },
+  b: {
+    type: String,
+    default: 'EMPTY'
+  },
+  c: {
+    type: String,
+    default: 'EMPTY'
+  }
+})
+</script>
diff --git a/test/fixtures/basic-aq/components/content/Alert.vue b/test/fixtures/basic-aq/components/content/Alert.vue
new file mode 100644
index 000000000..b282a4c1a
--- /dev/null
+++ b/test/fixtures/basic-aq/components/content/Alert.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <ContentSlot :use="$slots.default" />
+  </div>
+</template>
diff --git a/test/fixtures/basic-aq/components/content/CustomProseP.vue b/test/fixtures/basic-aq/components/content/CustomProseP.vue
new file mode 100644
index 000000000..aa856bc9b
--- /dev/null
+++ b/test/fixtures/basic-aq/components/content/CustomProseP.vue
@@ -0,0 +1,5 @@
+<template>
+  <p>
+    [Paragraph] <slot />
+  </p>
+</template>
diff --git a/test/fixtures/basic-aq/components/content/TestMarkdown.vue b/test/fixtures/basic-aq/components/content/TestMarkdown.vue
new file mode 100644
index 000000000..594be336a
--- /dev/null
+++ b/test/fixtures/basic-aq/components/content/TestMarkdown.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
+      <ContentSlot :use="$slots.title" unwrap="p">
+        Default title
+      </ContentSlot>
+    </h1>
+    <p>
+      <ContentSlot :use="$slots.default" unwrap="p">
+        Default paragraph
+      </ContentSlot>
+    </p>
+  </div>
+</template>
diff --git a/test/fixtures/basic-aq/content-fa/hello.md b/test/fixtures/basic-aq/content-fa/hello.md
new file mode 100644
index 000000000..80bf7b708
--- /dev/null
+++ b/test/fixtures/basic-aq/content-fa/hello.md
@@ -0,0 +1 @@
+# سلام
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content-fa/translated.md b/test/fixtures/basic-aq/content-fa/translated.md
new file mode 100644
index 000000000..58c102ba9
--- /dev/null
+++ b/test/fixtures/basic-aq/content-fa/translated.md
@@ -0,0 +1 @@
+# Translated to Farsi
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/-dash-ignored.md b/test/fixtures/basic-aq/content/-dash-ignored.md
new file mode 100644
index 000000000..945c9b46d
--- /dev/null
+++ b/test/fixtures/basic-aq/content/-dash-ignored.md
@@ -0,0 +1 @@
+.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/.dot-ignored.md b/test/fixtures/basic-aq/content/.dot-ignored.md
new file mode 100644
index 000000000..945c9b46d
--- /dev/null
+++ b/test/fixtures/basic-aq/content/.dot-ignored.md
@@ -0,0 +1 @@
+.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/LoremIpsum.vue b/test/fixtures/basic-aq/content/LoremIpsum.vue
new file mode 100644
index 000000000..113034a6b
--- /dev/null
+++ b/test/fixtures/basic-aq/content/LoremIpsum.vue
@@ -0,0 +1,5 @@
+<template>
+  <p>
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores tempore totam cum rerum natus aliquid cumque enim accusamus, dicta eveniet illum alias similique facilis blanditiis. Totam architecto a ratione earum.
+  </p>
+</template>
diff --git a/test/fixtures/basic-aq/content/_partial-content.md b/test/fixtures/basic-aq/content/_partial-content.md
new file mode 100644
index 000000000..324664ace
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial-content.md
@@ -0,0 +1 @@
+# This is a partial content
diff --git a/test/fixtures/basic-aq/content/_partial/content (v2).md b/test/fixtures/basic-aq/content/_partial/content (v2).md
new file mode 100644
index 000000000..27d810e8f
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/content (v2).md	
@@ -0,0 +1 @@
+# Content (v2)
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/custom-paragraph.md b/test/fixtures/basic-aq/content/_partial/custom-paragraph.md
new file mode 100644
index 000000000..e804acd77
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/custom-paragraph.md
@@ -0,0 +1,6 @@
+---
+_components:
+  p : CustomProseP
+---
+
+This is a paragraph.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/markdown.md b/test/fixtures/basic-aq/content/_partial/markdown.md
new file mode 100644
index 000000000..098bab047
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/markdown.md
@@ -0,0 +1,3 @@
+::test-markdown
+p1
+::
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/mdc-props-inline.md b/test/fixtures/basic-aq/content/_partial/mdc-props-inline.md
new file mode 100644
index 000000000..c26aeb023
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/mdc-props-inline.md
@@ -0,0 +1,9 @@
+---
+tags:
+- mdc
+categories:
+- Art
+- History
+---
+
+:prop-logger{a="categories" :b="categories"}
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/mdc-props.md b/test/fixtures/basic-aq/content/_partial/mdc-props.md
new file mode 100644
index 000000000..4d1af97e2
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/mdc-props.md
@@ -0,0 +1,10 @@
+---
+tags:
+- mdc
+categories:
+- Art
+- History
+---
+
+::prop-logger{a="categories" :b="categories"}
+::
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/prefix/foo/bar.md b/test/fixtures/basic-aq/content/_partial/prefix/foo/bar.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/fixtures/basic-aq/content/_partial/prefix/foo/baz.md b/test/fixtures/basic-aq/content/_partial/prefix/foo/baz.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/fixtures/basic-aq/content/_partial/prefix/foobarbaz.md b/test/fixtures/basic-aq/content/_partial/prefix/foobarbaz.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/fixtures/basic-aq/content/_partial/simple-json.json b/test/fixtures/basic-aq/content/_partial/simple-json.json
new file mode 100644
index 000000000..e5c518d50
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/simple-json.json
@@ -0,0 +1,3 @@
+{
+  "test": "test content"
+}
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/_partial/xss.md b/test/fixtures/basic-aq/content/_partial/xss.md
new file mode 100644
index 000000000..2e5e37ed8
--- /dev/null
+++ b/test/fixtures/basic-aq/content/_partial/xss.md
@@ -0,0 +1 @@
+<script>console.log('xss')</script>
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/cats/_dir.yml b/test/fixtures/basic-aq/content/cats/_dir.yml
new file mode 100644
index 000000000..9792a644b
--- /dev/null
+++ b/test/fixtures/basic-aq/content/cats/_dir.yml
@@ -0,0 +1 @@
+title: Cats list
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/cats/bombay.md b/test/fixtures/basic-aq/content/cats/bombay.md
new file mode 100644
index 000000000..7f03b39c0
--- /dev/null
+++ b/test/fixtures/basic-aq/content/cats/bombay.md
@@ -0,0 +1,6 @@
+---
+ref: https://en.wikipedia.org/wiki/Bombay_cat
+---
+# Bombay
+
+The Bombay cat is a type of short-haired cat developed by breeding sable Burmese and black American Shorthair cats, to produce a cat of mostly Burmese type, but with a sleek, panther-like black coat. Bombay is the name given to black cats of the Asian group.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/cats/index.md b/test/fixtures/basic-aq/content/cats/index.md
new file mode 100644
index 000000000..e3d9a2f86
--- /dev/null
+++ b/test/fixtures/basic-aq/content/cats/index.md
@@ -0,0 +1,4 @@
+# Cats
+
+- [Persian](/persian)
+- [Ragdoll](/ragdoll)
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/cats/persian.md b/test/fixtures/basic-aq/content/cats/persian.md
new file mode 100644
index 000000000..15b489975
--- /dev/null
+++ b/test/fixtures/basic-aq/content/cats/persian.md
@@ -0,0 +1,6 @@
+---
+ref: https://en.wikipedia.org/wiki/Persian_cat
+---
+# Persian
+
+The Persian cat (Aksha) (Persian: گربه پارسی, Gorbe'-ye Pârsi) is a long-haired breed of cat characterized by its round face and short muzzle. It is also known as the "Persian Longhair" in English-speaking countries. The first documented ancestors of Persian cats were imported into Italy from Persia around 1620.[1][2] Recognized by the cat fancy since the late 19th century, Persian cats were first adopted by the English, and then mainly by American breeders after the Second World War. Some cat fancier organizations' breed standards subsume the Himalayan and Exotic Shorthair as variants of this breed, while others treat them as separate breeds.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/cats/ragdoll.md b/test/fixtures/basic-aq/content/cats/ragdoll.md
new file mode 100644
index 000000000..20f457dee
--- /dev/null
+++ b/test/fixtures/basic-aq/content/cats/ragdoll.md
@@ -0,0 +1,6 @@
+---
+ref: https://en.wikipedia.org/wiki/Ragdoll
+---
+# Ragdoll
+
+The Ragdoll is a cat breed with a color point coat and blue eyes. Their form is large and muscular and their coat is silky soft and semi-longhair. Ragdolls were developed by American breeder Ann Baker in the 1960s. They are best known for their docile and placid temperament and affectionate nature. The name 'Ragdoll' is derived from the tendency of individuals from the original breeding stock to go limp and relaxed when picked up.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/components/from-content.md b/test/fixtures/basic-aq/content/components/from-content.md
new file mode 100644
index 000000000..3402c87e6
--- /dev/null
+++ b/test/fixtures/basic-aq/content/components/from-content.md
@@ -0,0 +1,4 @@
+# Components inside content
+
+::lorem-ipsum
+::
diff --git a/test/fixtures/basic-aq/content/dogs/German Shepherd.md b/test/fixtures/basic-aq/content/dogs/German Shepherd.md
new file mode 100644
index 000000000..9c62e899e
--- /dev/null
+++ b/test/fixtures/basic-aq/content/dogs/German Shepherd.md	
@@ -0,0 +1,6 @@
+---
+ref: https://en.wikipedia.org/wiki/German_Shepherd
+---
+# German Shepherd
+
+The German Shepherd or German Shepherd Dog (GSD), also known as the Alsatian, is a German breed of working dog of medium to large size. It is a modern breed, developed by Max von Stephanitz from various traditional German herding dogs from 1899.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/dogs/_dir.yml b/test/fixtures/basic-aq/content/dogs/_dir.yml
new file mode 100644
index 000000000..1a50ce9c4
--- /dev/null
+++ b/test/fixtures/basic-aq/content/dogs/_dir.yml
@@ -0,0 +1,2 @@
+title: Dogs List
+icon: 🐶
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/dogs/bulldog.md b/test/fixtures/basic-aq/content/dogs/bulldog.md
new file mode 100644
index 000000000..c758b16cc
--- /dev/null
+++ b/test/fixtures/basic-aq/content/dogs/bulldog.md
@@ -0,0 +1,6 @@
+---
+ref: https://en.wikipedia.org/wiki/Bulldog
+---
+# Bulldog
+
+The Bulldog, also known as the English Bulldog or British Bulldog, is a medium-sized dog breed. It is a muscular, hefty dog with a wrinkled face and a distinctive pushed-in nose. The Kennel Club (UK), the American Kennel Club (US), and the United Kennel Club (US) oversee breeding records. Bulldogs are popular pets; they were the fifth most popular purebreed in the US in 2017 according to the American Kennel Club.
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/head.md b/test/fixtures/basic-aq/content/head.md
new file mode 100644
index 000000000..1622651ff
--- /dev/null
+++ b/test/fixtures/basic-aq/content/head.md
@@ -0,0 +1,9 @@
+---
+head.title: 'Head overwritten'
+head.description: 'Description overwritten'
+head.image: 'https://picsum.photos/200/300'
+---
+
+# Basic Head
+
+Basic description
diff --git a/test/fixtures/basic-aq/content/index.md b/test/fixtures/basic-aq/content/index.md
new file mode 100644
index 000000000..e5a878696
--- /dev/null
+++ b/test/fixtures/basic-aq/content/index.md
@@ -0,0 +1,4 @@
+# Index
+
+
+Hello World
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/navigation-disabled.md b/test/fixtures/basic-aq/content/navigation-disabled.md
new file mode 100644
index 000000000..73a14154e
--- /dev/null
+++ b/test/fixtures/basic-aq/content/navigation-disabled.md
@@ -0,0 +1,7 @@
+---
+navigation: false
+---
+
+# Hidden from navigation
+
+Basic description
diff --git a/test/fixtures/basic-aq/content/numbers/1.one.md b/test/fixtures/basic-aq/content/numbers/1.one.md
new file mode 100644
index 000000000..8b5f67856
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/1.one.md
@@ -0,0 +1 @@
+# 1
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/13.thirteen.md b/test/fixtures/basic-aq/content/numbers/13.thirteen.md
new file mode 100644
index 000000000..64d062e64
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/13.thirteen.md
@@ -0,0 +1 @@
+# 13
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/2.two.md b/test/fixtures/basic-aq/content/numbers/2.two.md
new file mode 100644
index 000000000..f2144e446
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/2.two.md
@@ -0,0 +1 @@
+# 2
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/21.twenty-one.md b/test/fixtures/basic-aq/content/numbers/21.twenty-one.md
new file mode 100644
index 000000000..95a379b46
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/21.twenty-one.md
@@ -0,0 +1 @@
+# 21
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/3.three.md b/test/fixtures/basic-aq/content/numbers/3.three.md
new file mode 100644
index 000000000..59296627b
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/3.three.md
@@ -0,0 +1 @@
+# 3
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/5.five.md b/test/fixtures/basic-aq/content/numbers/5.five.md
new file mode 100644
index 000000000..d405357b0
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/5.five.md
@@ -0,0 +1 @@
+# 5
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/numbers/8.eight.md b/test/fixtures/basic-aq/content/numbers/8.eight.md
new file mode 100644
index 000000000..c0e6517b8
--- /dev/null
+++ b/test/fixtures/basic-aq/content/numbers/8.eight.md
@@ -0,0 +1 @@
+# 8
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/test-navigation/1.index.md b/test/fixtures/basic-aq/content/test-navigation/1.index.md
new file mode 100644
index 000000000..a01752011
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/1.index.md
@@ -0,0 +1,4 @@
+---
+navigation.custom-field: index file
+---
+# /test-navigation
diff --git a/test/fixtures/basic-aq/content/test-navigation/2.page.md b/test/fixtures/basic-aq/content/test-navigation/2.page.md
new file mode 100644
index 000000000..aee5d0255
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/2.page.md
@@ -0,0 +1,4 @@
+---
+navigation.custom-field: page file
+---
+# /test-navigation/page
diff --git a/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/index.md b/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/index.md
new file mode 100644
index 000000000..b749326fe
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/index.md
@@ -0,0 +1 @@
+# /test-navigation/not-hidden-dir
diff --git a/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/page.md b/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/page.md
new file mode 100644
index 000000000..8c497595a
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/99.not-hidden-dir/page.md
@@ -0,0 +1 @@
+# /test-navigation/not-hidden-dir/page
diff --git a/test/fixtures/basic-aq/content/test-navigation/_dir.yml b/test/fixtures/basic-aq/content/test-navigation/_dir.yml
new file mode 100644
index 000000000..b4ff2a77f
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/_dir.yml
@@ -0,0 +1,3 @@
+title: Test Navigation
+navigation:
+  custom-field: _dir file
diff --git a/test/fixtures/basic-aq/content/test-navigation/hidden-dir/_dir.yml b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/_dir.yml
new file mode 100644
index 000000000..d2df610e4
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/_dir.yml
@@ -0,0 +1,2 @@
+title: Hidden Dir
+navigation: false
diff --git a/test/fixtures/basic-aq/content/test-navigation/hidden-dir/index.md b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/index.md
new file mode 100644
index 000000000..43d4ed1eb
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/index.md
@@ -0,0 +1 @@
+# /test-navigation/hidden-dir/
diff --git a/test/fixtures/basic-aq/content/test-navigation/hidden-dir/page.md b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/page.md
new file mode 100644
index 000000000..54e4050a1
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/page.md
@@ -0,0 +1 @@
+# /test-navigation/hidden-dir/page
diff --git a/test/fixtures/basic-aq/content/test-navigation/hidden-dir/sub-hidden-dir/page.md b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/sub-hidden-dir/page.md
new file mode 100644
index 000000000..f8526cd75
--- /dev/null
+++ b/test/fixtures/basic-aq/content/test-navigation/hidden-dir/sub-hidden-dir/page.md
@@ -0,0 +1 @@
+# /test-navigation/hidden-dir/sub-hidden-dir/page
diff --git a/test/fixtures/basic-aq/content/translated.md b/test/fixtures/basic-aq/content/translated.md
new file mode 100644
index 000000000..012d8f298
--- /dev/null
+++ b/test/fixtures/basic-aq/content/translated.md
@@ -0,0 +1 @@
+# Translate Me
\ No newline at end of file
diff --git a/test/fixtures/basic-aq/content/with-'invalid'-char.md b/test/fixtures/basic-aq/content/with-'invalid'-char.md
new file mode 100644
index 000000000..8f835da2a
--- /dev/null
+++ b/test/fixtures/basic-aq/content/with-'invalid'-char.md
@@ -0,0 +1 @@
+# This file's name is invalid
diff --git "a/test/fixtures/basic-aq/content/\343\201\223\343\202\223\343\201\253\343\201\241\343\201\257.md" "b/test/fixtures/basic-aq/content/\343\201\223\343\202\223\343\201\253\343\201\241\343\201\257.md"
new file mode 100644
index 000000000..ea70755d6
--- /dev/null
+++ "b/test/fixtures/basic-aq/content/\343\201\223\343\202\223\343\201\253\343\201\241\343\201\257.md"
@@ -0,0 +1,5 @@
+---
+_path: /こんにちは
+---
+
+# 🎨 こんにちは
diff --git a/test/fixtures/basic-aq/nuxt.config.ts b/test/fixtures/basic-aq/nuxt.config.ts
new file mode 100644
index 000000000..b6ec9b853
--- /dev/null
+++ b/test/fixtures/basic-aq/nuxt.config.ts
@@ -0,0 +1,68 @@
+import { resolve } from 'pathe'
+import contentModule from '../../..'
+
+export default defineNuxtConfig({
+  nitro: {
+    plugins: [
+      '~/addons/nitro-plugin.ts'
+    ]
+  },
+  components: {
+    dirs: [
+      {
+        path: resolve(__dirname, './components'),
+        global: true
+      },
+      {
+        path: resolve(__dirname, './content'),
+        global: true,
+        pathPrefix: false,
+        prefix: ''
+      }
+    ]
+  },
+  modules: [contentModule],
+  content: {
+    experimental: {
+      advanceQuery: true
+    },
+    locales: ['fa', 'en'],
+    defaultLocale: 'en',
+    sources: [
+      {
+        name: 'fa-ir',
+        prefix: '/fa',
+        driver: 'fs',
+        base: resolve(__dirname, 'content-fa')
+      }
+    ],
+    ignores: ['.*\\.vue'],
+    navigation: {
+      fields: ['icon']
+    },
+    highlight: {
+      theme: {
+        default: 'github-light',
+        dark: 'github-dark'
+      }
+    },
+    markdown: {
+      // Object syntax can be used to override default options
+      remarkPlugins: {
+        // override remark-emoji options
+        'remark-emoji': {
+          emoticon: true
+        },
+        // disable remark-gfm
+        'remark-gfm': false,
+        // add remark-oembed
+        'remark-oembed': {}
+      },
+      // Array syntax can be used to add plugins
+      rehypePlugins: [
+        'rehype-figure',
+        ['rehype-wrap-all', [{ selector: 'ol', wrapper: 'p' }, { selector: 'ul', wrapper: 'p' }]]
+      ]
+    }
+  }
+})
diff --git a/test/fixtures/basic-aq/pages/[...slug].vue b/test/fixtures/basic-aq/pages/[...slug].vue
new file mode 100644
index 000000000..4a7919111
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/[...slug].vue
@@ -0,0 +1,3 @@
+<template>
+  <ContentDoc />
+</template>
diff --git a/test/fixtures/basic-aq/pages/bypass-head.vue b/test/fixtures/basic-aq/pages/bypass-head.vue
new file mode 100644
index 000000000..945891bfd
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/bypass-head.vue
@@ -0,0 +1,3 @@
+<template>
+  <ContentDoc path="/head" :head="false" />
+</template>
diff --git a/test/fixtures/basic-aq/pages/dogs-list.vue b/test/fixtures/basic-aq/pages/dogs-list.vue
new file mode 100644
index 000000000..940298812
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/dogs-list.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const query = {
+  path: '/dogs',
+  limit: 10,
+  where: [{
+    _partial: false
+  }]
+}
+</script>
+
+<template>
+  <ContentList :query="query">
+    <template #default="{ list }">
+      [{{ list.map(i => i.title).join(',') }}]
+    </template>
+    <template #not-found>
+      <p>No articles found</p>
+    </template>
+  </ContentList>
+</template>
diff --git a/test/fixtures/basic-aq/pages/features/custom-paragraph.vue b/test/fixtures/basic-aq/pages/features/custom-paragraph.vue
new file mode 100644
index 000000000..d3158cd01
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/features/custom-paragraph.vue
@@ -0,0 +1,3 @@
+<template>
+  <ContentDoc :path="'/'" :components="{ p: 'CustomProseP' }" />
+</template>
diff --git a/test/fixtures/basic-aq/pages/features/empty-slot.vue b/test/fixtures/basic-aq/pages/features/empty-slot.vue
new file mode 100644
index 000000000..254714f89
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/features/empty-slot.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <ContentRenderer :value="nullishDocument">
+      <template #empty>
+        Nullish Document!!!
+      </template>
+    </ContentRenderer>
+
+    <ContentRenderer :value="emptyChild">
+      <template #empty>
+        Empty Child!!!
+      </template>
+    </ContentRenderer>
+  </div>
+</template>
+
+<script setup>
+const nullishDocument = null
+
+const emptyChild = {
+  _path: '/_markdown',
+  _dir: '',
+  _draft: false,
+  _partial: true,
+  _locale: 'en',
+  _empty: true,
+  title: 'Markdown',
+  description: '',
+  body: {
+    type: 'root',
+    children: [],
+    toc: {
+      title: '',
+      searchDepth: 2,
+      depth: 2,
+      links: []
+    }
+  },
+  _type: 'markdown',
+  _id: 'content:_markdown.md',
+  _source: 'content',
+  _file: '_markdown.md',
+  _extension: 'md'
+}
+</script>
diff --git a/test/fixtures/basic-aq/pages/features/multi-part-path.vue b/test/fixtures/basic-aq/pages/features/multi-part-path.vue
new file mode 100644
index 000000000..74ccedb2e
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/features/multi-part-path.vue
@@ -0,0 +1,3 @@
+<template>
+  <ContentDoc path="/cats/persian" />
+</template>
diff --git a/test/fixtures/basic-aq/pages/features/query-content.vue b/test/fixtures/basic-aq/pages/features/query-content.vue
new file mode 100644
index 000000000..67c61f6b8
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/features/query-content.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <pre>$${{ data }}$$</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { queryContent, useRoute, useAsyncData } from '#imports'
+
+const route = useRoute()
+const prefix = route.query.prefix === undefined ? '/_partial' : ''
+const path = route.query.path || ''
+const findOne = route.query.findOne || false
+const where = route.query.where ? JSON.parse(route.query.where) : false
+
+const { data } = await useAsyncData('foo', () => {
+  let q = queryContent(prefix + path || undefined)
+
+  if (where) {
+    q = q.where(where)
+  }
+
+  return findOne ? q.findOne() : q.find()
+},
+{
+  transform: data => findOne ? data.result?._id : data.result?.map(d => d._id)
+})
+</script>
diff --git a/test/fixtures/basic-aq/pages/features/slotted-content-renderer.vue b/test/fixtures/basic-aq/pages/features/slotted-content-renderer.vue
new file mode 100644
index 000000000..492944ae0
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/features/slotted-content-renderer.vue
@@ -0,0 +1,20 @@
+<template>
+  <main>
+    <ContentRenderer :value="data?.result">
+      <Alert>
+        The default slot is overridden.
+      </Alert>
+      <ContentRendererMarkdown :value="data?.result" />
+      <template #empty>
+        <p>No content found.</p>
+      </template>
+    </ContentRenderer>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { queryContent, useAsyncData } from '#imports'
+
+const path = '/'
+const { data } = await useAsyncData(`content-${path}`, () => queryContent().where({ _path: path, draft: { $ne: true } }).findOne())
+</script>
diff --git a/test/fixtures/basic-aq/pages/locale-[locale].vue b/test/fixtures/basic-aq/pages/locale-[locale].vue
new file mode 100644
index 000000000..097d37e39
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/locale-[locale].vue
@@ -0,0 +1,11 @@
+<template>
+  <pre>{{ ids }}</pre>
+</template>
+
+<script setup lang="ts">
+import { queryContent, useRoute, useAsyncData, computed } from '#imports'
+
+const route = useRoute()
+const { data: list } = await useAsyncData(route.path, () => queryContent().locale(route.params.locale).find())
+const ids = computed(() => list.value?.result.map(item => item._id).join('\n'))
+</script>
diff --git a/test/fixtures/basic-aq/pages/nav-with-query.vue b/test/fixtures/basic-aq/pages/nav-with-query.vue
new file mode 100644
index 000000000..9478cd280
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/nav-with-query.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { queryContent } from '#imports'
+
+const catsQuery = queryContent('cats')
+
+const numbersQuery = queryContent('numbers')
+
+const dogsQuery = {
+  where: [
+    { _path: /^\/dogs/ }
+  ]
+}
+</script>
+
+<template>
+  <div>
+    <ContentNavigation v-slot="{ navigation: catsNav }" :query="catsQuery">
+      <div v-if="catsNav">
+        {{ JSON.stringify(catsNav) }}
+
+        <NuxtLink
+          v-for="link of catsNav[0].children"
+          :key="link._path"
+          :to="link._path"
+          style="margin-right: 1rem;"
+        >
+          {{ link.navTitle || link.title }}
+        </NuxtLink>
+      </div>
+    </ContentNavigation>
+    <br>
+    <ContentNavigation v-slot="{ navigation: numbersNav }" :query="numbersQuery">
+      <div v-if="numbersNav">
+        {{ JSON.stringify(numbersNav) }}
+
+        <NuxtLink
+          v-for="link of numbersNav[0].children"
+          :key="link._path"
+          :to="link._path"
+          style="margin-right: 1rem;"
+        >
+          {{ link.navTitle || link.title }}
+        </NuxtLink>
+      </div>
+    </ContentNavigation>
+    <br>
+    <ContentNavigation v-slot="{ navigation: dogsNav }" :query="dogsQuery">
+      <div v-if="dogsNav">
+        {{ JSON.stringify(dogsNav) }}
+
+        <NuxtLink
+          v-for="link of dogsNav[0].children"
+          :key="link._path"
+          :to="link._path"
+          style="margin-right: 1rem;"
+        >
+          {{ link.navTitle || link.title }}
+        </NuxtLink>
+      </div>
+    </ContentNavigation>
+  </div>
+</template>
diff --git a/test/fixtures/basic-aq/pages/parse.vue b/test/fixtures/basic-aq/pages/parse.vue
new file mode 100644
index 000000000..2c7118f41
--- /dev/null
+++ b/test/fixtures/basic-aq/pages/parse.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <ContentRendererMarkdown :value="data" />
+  </div>
+</template>
+
+<script setup>
+import { useRoute, useAsyncData } from '#imports'
+
+const { content } = useRoute().query
+const { data } = await useAsyncData(content, async () => {
+  return await $fetch('/api/parse', {
+    method: 'POST',
+    cors: true,
+    body: {
+      id: 'content:index.md',
+      content: decodeURIComponent(content)
+    }
+  })
+})
+</script>
diff --git a/test/fixtures/basic-aq/server/api/parse.ts b/test/fixtures/basic-aq/server/api/parse.ts
new file mode 100644
index 000000000..95ba9f33c
--- /dev/null
+++ b/test/fixtures/basic-aq/server/api/parse.ts
@@ -0,0 +1,11 @@
+import { eventHandler, readBody } from 'h3'
+import { parseContent } from '#content/server'
+
+export default eventHandler(async (event) => {
+  const { id, content, options } = await readBody(event)
+
+  // @ts-ignore
+  const parsedContent = await parseContent(id, content, options)
+
+  return parsedContent
+})
diff --git a/test/fixtures/basic-aq/tsconfig.json b/test/fixtures/basic-aq/tsconfig.json
new file mode 100644
index 000000000..eb97e3f0e
--- /dev/null
+++ b/test/fixtures/basic-aq/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
\ No newline at end of file
diff --git a/test/fixtures/document-driven-aq/components/content/Debug.vue b/test/fixtures/document-driven-aq/components/content/Debug.vue
new file mode 100644
index 000000000..e3ff624d4
--- /dev/null
+++ b/test/fixtures/document-driven-aq/components/content/Debug.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h3 style="margin: 0 !important;">
+      useContent().navigation
+    </h3>
+    <pre style="padding: 1rem; border-radius: 16px;">{{ navigation }}</pre>
+
+    <h3 style="margin: 0 !important;">
+      useContent().page
+    </h3>
+    <pre style="padding: 1rem; border-radius: 16px;">{{ page }}</pre>
+
+    <h3 style="margin: 0 !important;">
+      useContent().surround
+    </h3>
+    <pre style="padding: 1rem; border-radius: 16px;">{{ surround }}</pre>
+
+    <h3 style="margin: 0 !important;">
+      useContent().globals
+    </h3>
+    <pre style="padding: 1rem; border-radius: 16px;">{{ globals }}</pre>
+
+    <h3 style="margin: 0 !important;">
+      useTheme()
+    </h3>
+    <pre style="padding: 1rem; border-radius: 16px;">{{ theme }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useContent, useTheme } from '#imports'
+
+const { globals, surround, page, navigation } = useContent()
+
+const theme = useTheme()
+</script>
diff --git a/test/fixtures/document-driven-aq/composables/useTheme.ts b/test/fixtures/document-driven-aq/composables/useTheme.ts
new file mode 100644
index 000000000..653958dd7
--- /dev/null
+++ b/test/fixtures/document-driven-aq/composables/useTheme.ts
@@ -0,0 +1,9 @@
+import { useContent, computed } from '#imports'
+
+export const useTheme = () => {
+  const { globals } = useContent()
+
+  const theme = computed(() => globals.value?.theme)
+
+  return theme
+}
diff --git a/test/fixtures/document-driven-aq/content/0.index.md b/test/fixtures/document-driven-aq/content/0.index.md
new file mode 100644
index 000000000..f3c858066
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/0.index.md
@@ -0,0 +1,3 @@
+# Home
+
+Hello World!
diff --git a/test/fixtures/document-driven-aq/content/1.debug.md b/test/fixtures/document-driven-aq/content/1.debug.md
new file mode 100644
index 000000000..c594ec203
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/1.debug.md
@@ -0,0 +1,6 @@
+# Debug
+
+::debug
+::
+
+`useTheme()` is built on top of `globals` key.
diff --git a/test/fixtures/document-driven-aq/content/2.layout.md b/test/fixtures/document-driven-aq/content/2.layout.md
new file mode 100644
index 000000000..cb2e7fc50
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/2.layout.md
@@ -0,0 +1,9 @@
+---
+layout: reversed
+---
+
+# Layout
+
+This page uses `reversed` layout.
+
+Navigation should be on bottom.
diff --git a/test/fixtures/document-driven-aq/content/3.fm-data.md b/test/fixtures/document-driven-aq/content/3.fm-data.md
new file mode 100644
index 000000000..8026c40e4
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/3.fm-data.md
@@ -0,0 +1,6 @@
+---
+score: 23.5
+image: 'https://picsum.photos/400/200'
+---
+
+# FM Data
diff --git a/test/fixtures/document-driven-aq/content/4.no-surround.md b/test/fixtures/document-driven-aq/content/4.no-surround.md
new file mode 100644
index 000000000..a764a3983
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/4.no-surround.md
@@ -0,0 +1 @@
+# Surround disabled in document driven
\ No newline at end of file
diff --git a/test/fixtures/document-driven-aq/content/5.og-image.md b/test/fixtures/document-driven-aq/content/5.og-image.md
new file mode 100644
index 000000000..808fb60d3
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/5.og-image.md
@@ -0,0 +1,7 @@
+---
+image.src: 'https://picsum.photos/400/200'
+image.width: 400
+image.height: 200
+---
+
+# OG Image
diff --git a/test/fixtures/document-driven-aq/content/_theme.yml b/test/fixtures/document-driven-aq/content/_theme.yml
new file mode 100644
index 000000000..4cdafb27e
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/_theme.yml
@@ -0,0 +1 @@
+test: 'Hello World'
diff --git a/test/fixtures/document-driven-aq/content/redirect/_dir.yml b/test/fixtures/document-driven-aq/content/redirect/_dir.yml
new file mode 100644
index 000000000..b8a0c441b
--- /dev/null
+++ b/test/fixtures/document-driven-aq/content/redirect/_dir.yml
@@ -0,0 +1 @@
+navigation.redirect: https://nuxtjs.org
\ No newline at end of file
diff --git a/test/fixtures/document-driven-aq/layouts/reversed.vue b/test/fixtures/document-driven-aq/layouts/reversed.vue
new file mode 100644
index 000000000..5a8dfd8c6
--- /dev/null
+++ b/test/fixtures/document-driven-aq/layouts/reversed.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <NuxtLoadingBar />
+
+    <NuxtPage />
+
+    <PageNav />
+  </div>
+</template>
+
+<style>
+body, html {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+</style>
diff --git a/test/fixtures/document-driven-aq/nuxt.config.ts b/test/fixtures/document-driven-aq/nuxt.config.ts
new file mode 100644
index 000000000..0371a9f55
--- /dev/null
+++ b/test/fixtures/document-driven-aq/nuxt.config.ts
@@ -0,0 +1,20 @@
+import contentModule from '../../..'
+
+export default defineNuxtConfig({
+  modules: [contentModule],
+  content: {
+    experimental: {
+      advanceQuery: true
+    },
+    documentDriven: {
+      globals: {
+        theme: {
+          where: {
+            _id: 'content:_theme.yml'
+          },
+          without: ['_']
+        }
+      }
+    }
+  }
+})
diff --git a/test/fixtures/document-driven-aq/pages/custom-search.vue b/test/fixtures/document-driven-aq/pages/custom-search.vue
new file mode 100644
index 000000000..9d95240d7
--- /dev/null
+++ b/test/fixtures/document-driven-aq/pages/custom-search.vue
@@ -0,0 +1,36 @@
+<script setup>
+import { definePageMeta, useContent, useContentHead } from '#imports'
+
+definePageMeta({
+  documentDriven: {
+    page: {
+      score: {
+        $eq: 23.5
+      }
+    }
+  }
+})
+
+const { page, surround } = useContent()
+useContentHead(page)
+</script>
+
+<template>
+  <div>
+    <ContentRenderer :value="page" />
+    <div>
+      <div v-if="surround[0]">
+        with previous link {{ surround[0]._path }}
+      </div>
+      <div v-else>
+        no previous link
+      </div>
+      <div v-if="surround[1]">
+        with next link {{ surround[1]._path }}
+      </div>
+      <div v-else>
+        no next link
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/test/fixtures/document-driven-aq/pages/disabled.vue b/test/fixtures/document-driven-aq/pages/disabled.vue
new file mode 100644
index 000000000..cc4387467
--- /dev/null
+++ b/test/fixtures/document-driven-aq/pages/disabled.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    Document driven is disabled for this page
+    <div>page: {{ page }}</div>
+    <div>surround: {{ surround }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { definePageMeta, useContent } from '#imports'
+
+definePageMeta({
+  documentDriven: false
+})
+
+const { page, surround } = useContent()
+</script>
diff --git a/test/fixtures/document-driven-aq/pages/home.vue b/test/fixtures/document-driven-aq/pages/home.vue
new file mode 100644
index 000000000..352c71fe1
--- /dev/null
+++ b/test/fixtures/document-driven-aq/pages/home.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { definePageMeta, useContent, useContentHead } from '#imports'
+
+definePageMeta({
+  documentDriven: {
+    page: '/',
+    surround: '/debug'
+  }
+})
+
+const { page, surround } = useContent()
+useContentHead(page)
+</script>
+
+<template>
+  <div>
+    <ContentRenderer :value="page" />
+    <div>
+      <div v-if="surround[0]">
+        with previous link {{ surround[0]._path }}
+      </div>
+      <div v-else>
+        no previous link
+      </div>
+      <div v-if="surround[1]">
+        with next link {{ surround[1]._path }}
+      </div>
+      <div v-else>
+        no next link
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/test/fixtures/document-driven-aq/pages/no-surround.vue b/test/fixtures/document-driven-aq/pages/no-surround.vue
new file mode 100644
index 000000000..b92aece5a
--- /dev/null
+++ b/test/fixtures/document-driven-aq/pages/no-surround.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Document driven page is disabled for this route
+    <div>page: {{ page }}</div>
+    <div>surround: {{ surround }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { definePageMeta, useContent } from '#imports'
+
+definePageMeta({
+  documentDriven: {
+    surround: false
+  }
+})
+
+const { page, surround } = useContent()
+</script>