From 221e186980ce4695cc9a8bb0f33d2bc338301d69 Mon Sep 17 00:00:00 2001
From: passionate-bram <146706532+passionate-bram@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:40:51 +0100
Subject: [PATCH] docs: create a page explaining `import.meta` (#24186)

---
 docs/3.api/6.advanced/2.import-meta.md | 58 ++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 docs/3.api/6.advanced/2.import-meta.md

diff --git a/docs/3.api/6.advanced/2.import-meta.md b/docs/3.api/6.advanced/2.import-meta.md
new file mode 100644
index 0000000000..97d291ee98
--- /dev/null
+++ b/docs/3.api/6.advanced/2.import-meta.md
@@ -0,0 +1,58 @@
+---
+title: 'Import meta'
+description: Understand where your code is running using `import.meta`.
+---
+
+## The `import.meta` object
+
+With ES modules you can obtain some metadata from the code that imports or compiles your ES-module.
+This is done through `import.meta`, which is an object that provides your code with this information.
+Throughout the Nuxt documentation you may see snippets that use this already to figure out whether the
+code is currently running on the client or server side.
+
+:read-more{to="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta"}
+
+## Runtime (App) Properties
+
+These values are statically injected and can be used for tree-shaking your runtime code.
+
+Property | Type | Description
+--- | --- | ---
+`import.meta.client` | boolean | True when evaluated on the client side.
+`import.meta.browser` | boolean | True when evaluated on the client side.
+`import.meta.server` | boolean | True when evaluated on the server side.
+`import.meta.nitro` | boolean | True when evaluated on the server side.
+`import.meta.dev` | boolean | True when running the Nuxt dev server.
+`import.meta.test` | boolean | True when running in a test context.
+`import.meta.prerender` | boolean | True when rendering HTML on the server in the prerender stage of your build.
+
+## Builder Properties
+
+These values are available both in modules and in your `nuxt.config`.
+
+Property | Type | Description
+--- | --- | ---
+`import.meta.env` | object | Equals `process.env`
+`import.meta.url` | string | Resolvable path for the current file.
+
+## Examples
+
+### Using `import.meta.url` to resolve files within modules
+
+```ts [modules/my-module/index.ts]
+import { createResolver } from 'nuxt/kit'
+
+// Resolve relative from the current file
+const resolver = createResolver(import.meta.url)
+
+export default defineNuxtModule({
+  meta: { name: 'myModule' },
+  setup() {
+    addComponent({
+      name: 'MyModuleComponent',
+      // Resolves to '/modules/my-module/components/MyModuleComponent.vue'
+      filePath: resolver.resolve('./components/MyModuleComponent.vue')
+    })
+  }
+})
+```