feat: initial version with docs

Module hooks into @nuxt/components to inject loaders of these components into plugin.
The NuxtDynamic component is able to load a component dynamically with those loaders.

Author: aerophobic

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env

.npmignore

@@ -0,0 +1 @@
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 blokwise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,47 @@
+# @blokwise/dynamic
+
+Read the official [docs](https://dynamic.blokwise.io)
+
+## Installation
+
+Add `@blokwise/dynamic` dependency to your project:
+
+```bash
+yarn add @blokwise/dynamic
+```
+
+```bash
+npm install @blokwise/dynamic
+```
+
+Then, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:
+
+```js[nuxt.config.js]
+{
+  modules: [
+    '@blokwise/dynamic'
+  ],
+}
+```
+
+## Usage
+
+### Use dynamic component
+
+The dynamic component will be loaded as `NuxtDynamic`. The component will be loaded wheter 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.
+
+```vue
+<template>
+  <NuxtDynamic name="Logo" />
+</template>
+```
+
+### Load the component lazily
+
+The dynamic component can be loaded lazily as `LazyNuxtDynamic`.
+
+```vue
+<template>
+  <LazyNuxtDynamic name="Logo" />
+</template>
+```

docs/.env.example

@@ -0,0 +1,3 @@
+
+# Create one with no scope selected on https://github.com/settings/tokens/new
+GITHUB_TOKEN=

docs/.gitignore

@@ -0,0 +1,11 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env

docs/README.md

@@ -0,0 +1,27 @@
+# @blokwise/dynamic
+
+## Setup
+
+Install dependencies:
+
+```bash
+yarn install
+```
+
+## Development
+
+```bash
+yarn dev
+```
+
+## Static Generation
+
+This will create the `dist/` directory for publishing to static hosting:
+
+```bash
+yarn generate
+```
+
+To preview the static generated app, run `yarn start`
+
+For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs).

docs/content/en/index.md

@@ -0,0 +1,26 @@
+---
+title: Introduction
+description: ""
+position: 1
+category: ""
+features:
+  - Extends nuxt/component
+  - Auto-loading of dynamic components
+---
+
+<img src="/preview.png" class="light-img" width="1280" height="640" alt=""/>
+<img src="/preview-dark.png" class="dark-img" width="1280" height="640" alt=""/>
+
+[Module]() for [NuxtJS](https://nuxtjs.org).
+
+<alert type="success">
+Let nuxt.js hydrate your dynamic components with a breeze - automagically.
+</alert>
+
+## Features
+
+<list :items="features"></list>
+
+This `nuxt.js` module only works with [`@nuxt/components`](https://www.npmjs.com/package/@nuxt/components).
+
+<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="inline-flex ml-2"></app-color-switcher></p>

docs/content/en/setup.md

@@ -0,0 +1,39 @@
+---
+title: Setup
+description: ""
+position: 2
+category: Guide
+---
+
+## Installation
+
+Add `@blokwise/dynamic` dependency to your project:
+
+<code-group>
+  <code-block label="Yarn" active>
+
+```bash
+yarn add @blokwise/dynamic
+```
+
+  </code-block>
+  <code-block label="NPM">
+
+```bash
+npm install @blokwise/dynamic
+```
+
+  </code-block>
+</code-group>
+
+Then, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:
+
+```js[nuxt.config.js]
+{
+  modules: [
+    '@blokwise/dynamic'
+  ],
+}
+```
+
+Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.

docs/content/en/usage.md

@@ -0,0 +1,26 @@
+---
+title: Usage
+description: ""
+position: 3
+category: Guide
+---
+
+## Dynamic component
+
+The dynamic component will be loaded as `NuxtDynamic`. The component will be loaded wheter 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.
+
+```vue
+<template>
+  <NuxtDynamic name="Logo" />
+</template>
+```
+
+## Load the component lazily
+
+The dynamic component can be loaded lazily as `LazyNuxtDynamic`.
+
+```vue
+<template>
+  <LazyNuxtDynamic name="Logo" />
+</template>
+```