{"id":17241538,"url":"https://github.com/blokwise/dynamic","last_synced_at":"2025-04-14T03:14:27.171Z","repository":{"id":41394561,"uuid":"313742253","full_name":"blokwise/dynamic","owner":"blokwise","description":"Load components initialized through @nuxt/components dyamically.","archived":false,"fork":false,"pushed_at":"2022-11-08T11:13:39.000Z","size":627,"stargazers_count":57,"open_issues_count":2,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T03:14:07.319Z","etag":null,"topics":["nuxt","nuxt-components","nuxt-module","nuxtjs"],"latest_commit_sha":null,"homepage":"https://dynamic.blokwise.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blokwise.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-17T21:01:31.000Z","updated_at":"2025-03-16T02:32:05.000Z","dependencies_parsed_at":"2022-08-10T02:07:17.504Z","dependency_job_id":null,"html_url":"https://github.com/blokwise/dynamic","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blokwise%2Fdynamic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blokwise%2Fdynamic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blokwise%2Fdynamic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blokwise%2Fdynamic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blokwise","download_url":"https://codeload.github.com/blokwise/dynamic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813802,"owners_count":21165634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-components","nuxt-module","nuxtjs"],"created_at":"2024-10-15T06:09:52.106Z","updated_at":"2025-04-14T03:14:27.152Z","avatar_url":"https://github.com/blokwise.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @blokwise/dynamic\n\nRead the official [docs](https://dynamic.blokwise.io)\n\n## Installation\n\nAdd `@blokwise/dynamic` dependency to your project:\n\n```bash\nyarn add @blokwise/dynamic\n```\n\n```bash\nnpm install @blokwise/dynamic\n```\n\nThen, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:\n\n```js[nuxt.config.js]\n{\n  modules: [\n    '@blokwise/dynamic'\n  ],\n}\n```\n\n## Props\n\n### `component`\n\n- **Type**: `String`\n\nThe name of the component which should be imported.\nIf the component was initialized with a prefix in `@nuxt/components` config, it should be loaded as such. Nevertheless it is possible to **ommit the prefix to automatically detect the right component** _(if there are no conflincting names)_.\n\n_**Heads up**: Starting with version `v1.4.0` the prop `component` replaces the deprecated prop `name`.\nPassing the component name by using `name` still works through `$attrs.name` internally.\nHowever, this workaround will be removed in the next major version (`v.2.0.0+`)._\n\n### `hydration`\n\n- **Type**: `String`\n- **Default**: `'WhenIdle'`\n- _Options_: `'WhenIdle'`, `'WhenVisible'`, `'OnInteraction'`, `'Never'`\n\nThe hydration prop controls **when / how the component will be hydrated**. The hydration is implemented with `vue-lazy-hydration` thanks to [Markus Oberlehner](https://github.com/maoberlehner/vue-lazy-hydration).\n\n### `componentRef`\n\n- **Type**: `String` or `Number`\n- **Default**: `null`\n\nThe componentRef prop adds a reference to the child component.\n\n## Usage\n\n### Use dynamic component\n\nThe dynamic component will be loaded as `NuxtDynamic`. The component will be loaded whether you pass the name prefix or not. So in the following case it could load a component called `Logo` without prefix or a component called `BlokwiseLogo` which is prefixed with `Blokwise` according to `@nuxt/components` configuration of your project / third party libraries.\n\n```vue\n\u003ctemplate\u003e\n  \u003cNuxtDynamic component=\"Logo\" /\u003e\n\u003c/template\u003e\n```\n\n### Load the component lazily\n\nThe dynamic component can be loaded lazily as `LazyNuxtDynamic`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cLazyNuxtDynamic component=\"Logo\" /\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblokwise%2Fdynamic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblokwise%2Fdynamic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblokwise%2Fdynamic/lists"}