Skip to content

Commit

Permalink
Create a page for explaining import.meta
Browse files Browse the repository at this point in the history
Documents the existence of `import.meta` and some of the properties that are available. Includes a warning that in nuxt module code there is limited support for `import.meta`.
  • Loading branch information
passionate-bram committed Nov 8, 2023
1 parent 2832f01 commit 411e967
Showing 1 changed file with 49 additions and 0 deletions.
49 changes: 49 additions & 0 deletions docs/3.api/6.advanced/2.Import meta.md
@@ -0,0 +1,49 @@
---
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"}

## Properties

Property | Type | Description
--- | --- | ---
`import.meta.client` | boolean | True when evaluated on the client-side, false otherwise.
`import.meta.dev` | boolean | Equals `nuxt.config.dev`
`import.meta.env` | object | Equals `process.env`
`import.meta.server` | boolean | True when evaluated on the server-side, false otherwise.
`import.meta.url` | string | Resolvable path for the current file.

::callout{color="amber" icon="i-ph-warning-duotone"}
In nuxt modules, only `import.meta.url` is supported.
::

## Examples

### Using `import.meta.url` to resolve files within your nuxt-module

```js
// /modules/my-module/index.ts

// Resolve relative from the current file
const {resolve} = createResolver(import.meta.url)

export default defineNuxtModule({
meta: { name: 'myModule' },
setup() {
addComponent({
name: 'MyModuleComponent',
// Resolves to '/modules/my-module/components/MyModuleComponent.vue'
filePath: resolve('./components/MyModuleComponent.vue'),
})
},
})
```

0 comments on commit 411e967

Please sign in to comment.