Overview:

The @blokwise/dynamic module is a dependency that can be added to a project to enable dynamic component loading in a Nuxt.js application. It provides features such as importing and loading components based on their names, controlling component hydration, and adding component references.

Features:

• Component Import: The module allows importing components based on their names. This can be done with or without a prefix, as specified in the @nuxt/components configuration.
• Deprecation Update: Starting with version v1.4.0, the prop name has been replaced by the prop component to pass the component name to be loaded.
• Hydration Control: The hydration prop controls when and how the component should be hydrated. The available options are ‘WhenIdle’, ‘WhenVisible’, ‘OnInteraction’, and ‘Never’.
• Component References: The componentRef prop can be used to add a reference to the child component.

Installation:

To install the @blokwise/dynamic dependency to your project, you can use the following command:

npm install @blokwise/dynamic

Once installed, you need to add @blokwise/dynamic to the modules section of your nuxt.config.js file:

{
  modules: [
    '@blokwise/dynamic',
  ],
}

Summary:

The @blokwise/dynamic module allows for dynamic component loading in a Nuxt.js project. It provides features such as component import based on names, component hydration control, and component references. This guide provides information on how to install the module and a brief overview of its key features.