chore(release): v1.0.5

Co-authored-by: nuxt-studio[bot] <117276984+nuxt-studio[bot]@users.noreply.github.com>

.github/workflows/studio.yml

@@ -58,7 +58,7 @@ jobs:
           cache: ${{ steps.pkgman.outputs.cache }}
 
       - name: Install dependencies
-        run: ${{ steps.pkgman.outputs.package_manager }} install
+        run: ${{ steps.pkgman.outputs.package_manager }} install --no-frozen-lockfile
 
       - name: Install @nuxthq/studio
         run: ${{ steps.pkgman.outputs.package_manager }} add -D @nuxthq/studio

.nuxtrc

@@ -0,0 +1,2 @@
+# enable TypeScript bundler module resolution - https://www.typescriptlang.org/docs/handbook/modules/reference.html#bundler
+experimental.typescriptBundlerResolution=true

CHANGELOG.md

@@ -1,6 +1,111 @@
 # Changelog
 
 
+## v1.0.5
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v1.0.4...v1.0.5)
+
+### 🩹 Fixes
+
+- Replace consola with logger ([5a7936a](https://github.com/arashsheyda/nuxt-mongoose/commit/5a7936a))
+
+### 🏡 Chore
+
+- **release:** V1.0.4 ([64a4fa5](https://github.com/arashsheyda/nuxt-mongoose/commit/64a4fa5))
+
+### ❤️ Contributors
+
+- Arash <arashi.sheyda@gmail.com>
+
+## v1.0.4
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v1.0.3...v1.0.5)
+
+### 💅 Refactors
+
+- Split services into individual files ([d6b8e91](https://github.com/arashsheyda/nuxt-mongoose/commit/d6b8e91))
+
+### 📖 Documentation
+
+- Update dependencies ([12d62d8](https://github.com/arashsheyda/nuxt-mongoose/commit/12d62d8))
+- Update dependencies ([7183742](https://github.com/arashsheyda/nuxt-mongoose/commit/7183742))
+
+### 🏡 Chore
+
+- Test bundler module resolution ([#36](https://github.com/arashsheyda/nuxt-mongoose/pull/36))
+- Update dependencies ([#38](https://github.com/arashsheyda/nuxt-mongoose/pull/38))
+- Update dependencies ([bdab2c5](https://github.com/arashsheyda/nuxt-mongoose/commit/bdab2c5))
+- Update playground ([42b3b83](https://github.com/arashsheyda/nuxt-mongoose/commit/42b3b83))
+- Update cover ([61cc323](https://github.com/arashsheyda/nuxt-mongoose/commit/61cc323))
+- Update cover ([bf7f9db](https://github.com/arashsheyda/nuxt-mongoose/commit/bf7f9db))
+
+### ❤️ Contributors
+
+- Arash
+- Amir H. Moayeri 
+- Daniel Roe <daniel@roe.dev>
+
+## v1.0.3
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v1.0.2...v1.0.3)
+
+### 🩹 Fixes
+
+- Add schema type ([4bc0742](https://github.com/arashsheyda/nuxt-mongoose/commit/4bc0742))
+
+### 💅 Refactors
+
+- Update to DevTools v1 ([1bec7a7](https://github.com/arashsheyda/nuxt-mongoose/commit/1bec7a7))
+
+### 📖 Documentation
+
+- Update ui ([9296ae7](https://github.com/arashsheyda/nuxt-mongoose/commit/9296ae7))
+- Fix playground path ([ea7c7b0](https://github.com/arashsheyda/nuxt-mongoose/commit/ea7c7b0))
+- Fix install workflow ([4c5a034](https://github.com/arashsheyda/nuxt-mongoose/commit/4c5a034))
+- Update link ([0b575fa](https://github.com/arashsheyda/nuxt-mongoose/commit/0b575fa))
+
+### 🏡 Chore
+
+- Remove comment ([549b2f3](https://github.com/arashsheyda/nuxt-mongoose/commit/549b2f3))
+
+### ❤️ Contributors
+
+- Arash
+
+## v1.0.2
+
+[compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v1.0.1...v1.0.2)
+
+### 🩹 Fixes
+
+- Resolve build stuck issue with nitro pre-render enabled ([#26](https://github.com/arashsheyda/nuxt-mongoose/pull/26))
+
+### 📖 Documentation
+
+- Default connection ([e7c7beb](https://github.com/arashsheyda/nuxt-mongoose/commit/e7c7beb))
+
+### 🏡 Chore
+
+- **release:** V1.0.2 ([ba8459](https://github.com/arashsheyda/nuxt-mongoose/commit/ba8459))
+- Lint ([3d7503e](https://github.com/arashsheyda/nuxt-mongoose/commit/3d7503e))
+
+### ❤️ Contributors
+
+- Arash Sheyda <sheidaeearash1999@gmail.com>
+- Arash
+
+## v1.0.1
+
+### 🏡 Chore
+
+- **release:** V1.0.0 ([b566196](https://github.com/arashsheyda/nuxt-mongoose/commit/b566196))
+- **release:** V1.0.1 ([5bf554f](https://github.com/arashsheyda/nuxt-mongoose/commit/5bf554f))
+- Update dependencies ([0f73464](https://github.com/arashsheyda/nuxt-mongoose/commit/0f73464))
+
+### ❤️ Contributors
+
+- Arash Sheyda <sheidaeearash1999@gmail.com>
+
 ## v1.0.0
 
 [compare changes](https://github.com/arashsheyda/nuxt-mongoose/compare/v0.0.9...v1.0.0)

README.md

@@ -1,4 +1,4 @@
-![nuxt-mongoose](https://nuxt-mongoose.nuxt.space/cover.jpg)
+![nuxt-mongoose](https://raw.githubusercontent.com/arashsheyda/nuxt-mongoose/main/docs/public/cover.jpg)
 
 <div align="center">
   <h1>Nuxt Mongoose</h1>

client/app.vue

@@ -1,11 +1,6 @@
-<script lang="ts" setup>
-import './styles/global.css'
-</script>
-
 <template>
   <Html>
     <Body h-screen>
-      <Notification />
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>

client/components/CreateResource.vue

@@ -249,8 +249,8 @@ const toggleSchema = computed({
             <NTextInput v-else v-model="column.default" n="orange" />
           </div>
           <div flex justify-center gap2>
-            <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
-            <NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
+            <NButton icon="carbon-add" n="cyan" @click="addField(index)" />
+            <NButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
           </div>
         </div>
       </div>

client/components/DatabaseDetail.vue

@@ -125,7 +125,7 @@ const copy = useCopy()
 
 <template>
   <div ref="dbContainer" :class="{ 'h-full': !documents?.length }">
-    <Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
+    <NNavbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
       <template #actions>
         <NButton icon="carbon:add" n="green" @click="addDocument">
           Add Document
@@ -155,7 +155,7 @@ const copy = useCopy()
           </NSelect>
         </div>
       </div>
-    </Navbar>
+    </NNavbar>
     <table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
       <thead>
         <tr>
@@ -180,14 +180,14 @@ const copy = useCopy()
           <td>
             <div flex justify-center gap2 class="group">
               <template v-if="editing && selectedDocument._id === document._id">
-                <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
-                <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
+                <NButton title="Save" icon="carbon-save" n="blue" @click="saveDocument(selectedDocument, false)" />
+                <NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
               </template>
               <template v-else>
-                <NIconButton title="Edit" icon="carbon-edit" @click="editDocument(document)" />
-                <NIconButton title="Delete" icon="carbon-trash-can" @click="deleteDocument(document)" />
-                <NIconButton title="Duplicate" icon="carbon-document-multiple-02" @click="saveDocument(document)" />
-                <NIconButton title="Copy" n="xs" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
+                <NButton title="Edit" icon="carbon-edit" n="blue" @click="editDocument(document)" />
+                <NButton title="Delete" icon="carbon-trash-can" n="red" @click="deleteDocument(document)" />
+                <NButton title="Duplicate" icon="carbon-document-multiple-02" n="cyan" @click="saveDocument(document)" />
+                <NButton title="Copy" n="xs purple" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
               </template>
             </div>
           </td>
@@ -198,8 +198,8 @@ const copy = useCopy()
             <input v-else placeholder="ObjectId(_id)" disabled>
           </td>
           <td flex="~ justify-center gap2">
-            <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
-            <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
+            <NButton title="Save" icon="carbon-save" n="green" @click="saveDocument(selectedDocument)" />
+            <NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
           </td>
         </tr>
       </tbody>

client/components/Drawer.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onClickOutside, useElementSize } from '@vueuse/core'
-
-const props = defineProps<{
-  modelValue?: boolean
-  navbar?: HTMLElement
-  autoClose?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const el = ref<HTMLElement>()
-
-const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
-
-onClickOutside(el, () => {
-  if (props.modelValue && props.autoClose)
-    emit('close')
-}, {
-  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
-})
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <Transition
-    enter-active-class="duration-200 ease-in"
-    enter-from-class="transform translate-x-1/1"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-out"
-    leave-from-class="opacity-100"
-    leave-to-class="transform translate-x-1/1"
-  >
-    <div
-      v-if="modelValue"
-      ref="el"
-      border="l base"
-      flex="~ col gap-1"
-      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
-      :style="{ top: `${top}px` }"
-      v-bind="$attrs"
-    >
-      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
-      <div relative h-full w-full of-auto>
-        <slot />
-      </div>
-    </div>
-  </Transition>
-</template>

client/components/Navbar.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  search: {
-    type: String,
-    default: undefined,
-  },
-  noPadding: {
-    type: Boolean,
-    default: true,
-  },
-  placeholder: {
-    type: String,
-    default: 'Search...',
-  },
-})
-
-const emit = defineEmits<{
-  (event: 'update:search', value: string): void
-}>()
-
-function update(event: any) {
-  emit('update:search', event.target.value)
-}
-</script>
-
-<template>
-  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
-    <div flex="~ gap4">
-      <slot name="search">
-        <NTextInput
-          :placeholder="placeholder"
-          icon="carbon-search"
-          n="primary" flex-auto
-          :class="{ 'px-5 py-2': !noPadding }"
-          :value="search"
-          @input="update"
-        />
-      </slot>
-      <slot name="actions" />
-    </div>
-    <slot />
-  </div>
-</template>

client/components/Notification.vue

@@ -1,34 +0,0 @@
-<script setup lang='ts'>
-const show = ref(false)
-const icon = ref<string | undefined>()
-const text = ref<string | undefined>()
-const classes = ref<string | undefined>()
-
-provideNotificationFn((data) => {
-  text.value = data.message
-  icon.value = data.icon
-  classes.value = data.classes ?? 'text-green'
-  show.value = true
-  setTimeout(() => {
-    show.value = false
-  }, data.duration ?? 1500)
-})
-</script>
-
-<template>
-  <div
-    fixed left-0 right-0 top-0 z-999 text-center
-    :class="show ? '' : 'pointer-events-none overflow-hidden'"
-  >
-    <div
-      border="~ base"
-      flex="~ inline gap2"
-      m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
-      :style="show ? {} : { transform: 'translateY(-300%)' }"
-      :class="[show ? 'shadow' : 'shadow-none', classes]"
-    >
-      <div v-if="icon" :class="icon" />
-      <div>{{ text }}</div>
-    </div>
-  </div>
-</template>

client/components/SplitPanel.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { Pane, Splitpanes } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-const props = defineProps<{
-  storageKey?: string
-  leftSize?: number
-  minSize?: number
-}>()
-
-const DEFAULT = 30
-
-const state = ref()
-const key = props.storageKey
-const size = key
-  ? computed({
-    get: () => state.value[key] || props.leftSize || DEFAULT,
-    set: (v) => { state.value[key] = v },
-  })
-  : ref(props.leftSize || DEFAULT)
-</script>
-
-<template>
-  <Splitpanes h-full of-hidden @resize="size = $event[0].size">
-    <Pane border="r base" h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
-      <slot name="left" />
-    </Pane>
-    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
-      <slot name="right" />
-    </Pane>
-  </Splitpanes>
-</template>

client/composables/dialog.ts

@@ -1,14 +0,0 @@
-let _showNotification: typeof showNotification
-
-export function showNotification(data: {
-  message: string
-  icon?: string
-  classes?: string
-  duration?: number
-}) {
-  _showNotification?.(data)
-}
-
-export function provideNotificationFn(fn: typeof showNotification) {
-  _showNotification = fn
-}

client/composables/editor.ts

@@ -1,14 +1,14 @@
 import { useClipboard } from '@vueuse/core'
-import { showNotification } from './dialog'
+// import {  } from '@nuxt/devtools-ui-kit'
 
 export function useCopy() {
   const clipboard = useClipboard()
 
   return (text: string) => {
     clipboard.copy(text)
-    showNotification({
-      message: 'Copied to clipboard',
-      icon: 'carbon-copy',
-    })
+    // devtoolsUiShowNotification({
+    //   message: 'Copied to clipboard',
+    //   icon: 'carbon-copy',
+    // })
   }
 }

client/pages/index.vue

@@ -36,22 +36,22 @@ async function refresh() {
 </script>
 
 <template>
-  <SplitPanel :min-left="13" :max-left="20">
+  <NSplitPane :min-left="13" :max-left="20">
     <template #left>
       <div px4>
-        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
+        <NNavbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2 no-padding>
           <div flex items-center gap2>
-            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
-            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
-            <NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
+            <NButton n="blue" w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
+            <!-- <NButton w-full mb1.5 icon="carbon-data-base" title="Default" n="green" /> -->
+            <NButton n="green" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
           </div>
-        </Navbar>
+        </NNavbar>
         <div grid gird-cols-1 my2 mx1>
           <NuxtLink
             v-for="table in filtered"
             :key="table.name"
             :to="{ name: 'index', query: { table: table.name } }"
-            flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
+            flex items-center justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
             :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }"
             @click="selectedCollection = table.name"
           >
@@ -59,9 +59,9 @@ async function refresh() {
               <NIcon icon="carbon-db2-database" />
               {{ table.name }}
             </span>
-            <div flex gap2>
-              <NIconButton block n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
-              <!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
+            <div flex="~ items-center gap-2">
+              <NButton :border="false" n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
+              <!-- <NButton :border="false" icon="carbon-overflow-menu-horizontal" /> -->
             </div>
           </NuxtLink>
         </div>
@@ -78,8 +78,8 @@ async function refresh() {
         </div>
       </div>
     </template>
-  </SplitPanel>
-  <Drawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
+  </NSplitPane>
+  <NDrawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false" z-20>
     <CreateResource @refresh="refresh" />
-  </Drawer>
+  </NDrawer>
 </template>

client/splitpanes.d.ts

@@ -1,21 +0,0 @@
-// TODO install @types/splitpanes once updated
-declare module 'splitpanes' {
-  import { Component } from 'vue'
-
-  export interface SplitpaneProps {
-    horizontal: boolean
-    pushOtherPanes: boolean
-    dblClickSplitter: boolean
-    firstSplitter: boolean
-  }
-
-  export interface PaneProps {
-    size: number | string
-    minSize: number | string
-    maxSize: number | string
-  }
-
-  export type Pane = Component<PaneProps>
-  export const Pane: Pane
-  export const Splitpanes: Component<SplitpaneProps>
-}

client/styles/global.css

@@ -1,35 +0,0 @@
-/* Splitpanes */
-.splitpanes__splitter {
-  position: relative;
-}
-.splitpanes__splitter:before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  transition: .2s ease;
-  content: '';
-  transition: opacity 0.4s;
-  z-index: 1;
-}
-.splitpanes__splitter:hover:before {
-  background: #8881;
-  opacity: 1;
-}
-.splitpanes--vertical>.splitpanes__splitter {
-  min-width: 0 !important;
-  width: 0 !important;
-}
-.splitpanes--horizontal>.splitpanes__splitter {
-  min-height: 0 !important;
-  height: 0 !important;
-}
-.splitpanes--vertical>.splitpanes__splitter:before {
-  left: -5px;
-  right: -4px;
-  height: 100%;
-}
-.splitpanes--horizontal>.splitpanes__splitter:before {
-  top: -5px;
-  bottom: -4px;
-  width: 100%;
-}

docs/app.config.ts

@@ -15,22 +15,16 @@ export default defineAppConfig({
       edit: true,
     },
     aside: {
-      level: 0,
+      level: 1,
       collapsed: false,
       exclude: [],
     },
-    main: {
-      padded: true,
-      fluid: true,
-    },
     header: {
       logo: true,
       showLinkIcon: true,
       exclude: [],
-      fluid: true,
     },
     footer: {
-      fluid: true,
       iconLinks: [
         {
           href: 'https://nuxt.com',

docs/components/content/Illustration.vue

@@ -0,0 +1,295 @@
+<template>
+  <svg
+    width="403"
+    height="226"
+    viewBox="0 0 403 226"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_1180_138)">
+      <g opacity="0.54">
+        <path
+          d="M0 12C0 5.37259 5.37258 0 12 0H391C397.627 0 403 5.37258 403 12V214C403 220.627 397.627 226 391 226H12C5.37259 226 0 220.627 0 214V12Z"
+          fill="url(#paint0_linear_1180_138)"
+          fill-opacity="0.3"
+        />
+        <path
+          d="M12 0.5H391C397.351 0.5 402.5 5.64873 402.5 12V214C402.5 220.351 397.351 225.5 391 225.5H12C5.64873 225.5 0.5 220.351 0.5 214V12C0.5 5.64873 5.64873 0.5 12 0.5Z"
+          stroke="url(#paint1_linear_1180_138)"
+          stroke-opacity="0.4"
+        />
+      </g>
+      <path
+        opacity="0.54"
+        d="M49.7811 28H57.5876C57.8356 28 58.0792 27.9354 58.2939 27.8125C58.5086 27.6896 58.6869 27.5128 58.8108 27.3C58.9347 27.0871 58.9999 26.8457 58.9998 26.5999C58.9997 26.3542 58.9343 26.1128 58.8102 25.9001L53.5676 16.9001C53.4437 16.6873 53.2654 16.5105 53.0507 16.3877C52.836 16.2648 52.5925 16.2001 52.3446 16.2001C52.0967 16.2001 51.8532 16.2648 51.6385 16.3877C51.4238 16.5105 51.2455 16.6873 51.1216 16.9001L49.7811 19.2028L47.1602 14.6998C47.0361 14.487 46.8578 14.3104 46.6431 14.1875C46.4283 14.0647 46.1847 14 45.9368 14C45.6889 14 45.4453 14.0647 45.2305 14.1875C45.0158 14.3104 44.8375 14.487 44.7134 14.6998L38.1896 25.9001C38.0655 26.1128 38.0001 26.3542 38 26.5999C37.9999 26.8457 38.0651 27.0871 38.189 27.3C38.3129 27.5128 38.4912 27.6896 38.7059 27.8125C38.9207 27.9354 39.1643 28 39.4122 28H44.3125C46.254 28 47.6859 27.1547 48.6711 25.5057L51.063 21.4001L52.3442 19.2028L56.1893 25.8028H51.063L49.7811 28ZM44.2326 25.8005L40.8128 25.7998L45.9391 17.0004L48.4969 21.4001L46.7843 24.3407C46.13 25.4107 45.3867 25.8005 44.2326 25.8005Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="75.5"
+        x2="84.5"
+        y2="75.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="147.5"
+        x2="63.5"
+        y2="147.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="172.5"
+        y1="147.5"
+        x2="192.899"
+        y2="147.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="301.5"
+        y1="147.5"
+        x2="321.5"
+        y2="147.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="143.5"
+        y1="20.5"
+        x2="167.5"
+        y2="20.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="184.5"
+        y1="20.5"
+        x2="208.5"
+        y2="20.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="225.5"
+        y1="20.5"
+        x2="249.5"
+        y2="20.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="93.5"
+        x2="178.5"
+        y2="93.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="162.5"
+        x2="115.544"
+        y2="162.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="172.5"
+        y1="162.5"
+        x2="244.5"
+        y2="162.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="301.5"
+        y1="162.5"
+        x2="373.5"
+        y2="162.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="111.5"
+        x2="178.5"
+        y2="111.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="43.5"
+        y1="177.5"
+        x2="115.5"
+        y2="177.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="172.5"
+        y1="177.5"
+        x2="244.5"
+        y2="177.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <line
+        opacity="0.54"
+        x1="301.5"
+        y1="177.5"
+        x2="373.5"
+        y2="177.5"
+        stroke="white"
+        stroke-opacity="0.1"
+        stroke-width="5"
+        stroke-linecap="round"
+      />
+      <rect
+        opacity="0.54"
+        x="335.465"
+        y="17.619"
+        width="41.1089"
+        height="11.7454"
+        rx="2.93635"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <rect
+        opacity="0.54"
+        x="212"
+        y="70"
+        width="164"
+        height="44"
+        rx="5"
+        fill="url(#paint2_linear_1180_138)"
+        fill-opacity="0.1"
+      />
+      <!-- Mongo Logo -->
+      <g transform="translate(170, 80) scale(2)">
+        <rect width="32" height="32" rx="7.5" style="fill:#023430" />
+        <path d="M21.4,13.4C20.1,7.6,17.3,6.1,16.6,5a10.1,10.1,0,0,1-.7-1.5,1.6,1.6,0,0,1-.6,1.2,14.1,14.1,0,0,0-4.9,10.5c-.3,6.1,4.5,9.9,5.1,10.3a1.4,1.4,0,0,0,1.4-.2,12.1,12.1,0,0,0,4.5-11.9" style="fill:#10aa50" />
+        <path d="M16.1,22.2a17.8,17.8,0,0,1-.5,3.3s.2,1.5.3,3h.5a30.6,30.6,0,0,1,.5-3.2C16.3,25,16.1,23.6,16.1,22.2Z" style="fill:#b8c4c2" />
+        <path d="M16.9,25.3c-.6-.3-.8-1.7-.8-3.1s.2-4.3.1-6.5,0-10.7-.3-12.1L16.6,5c.7,1.1,3.5,2.6,4.8,8.4A12,12,0,0,1,16.9,25.3Z" style="fill:#12924f" />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_1180_138"
+        x="162.895"
+        y="74.8947"
+        width="76.2105"
+        height="76.2105"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.44 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1180_138"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1180_138"
+          result="shape"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_1180_138"
+        x1="201.5"
+        y1="0"
+        x2="201.5"
+        y2="102.822"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_1180_138"
+        x1="201.5"
+        y1="-1.34109e-07"
+        x2="201.527"
+        y2="153.598"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_1180_138"
+        x1="294"
+        y1="70"
+        x2="294"
+        y2="114"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <clipPath id="clip0_1180_138">
+        <rect width="403" height="226" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

docs/content/0.index.md

@@ -12,7 +12,7 @@ main:
 ---
 cta:
   - Get started
-  - /getting-started/setup
+  - /docs/getting-started/setup
 secondary:
   - Open on GitHub →
   - https://github.com/arashsheyda/nuxt-mongoose
@@ -25,12 +25,54 @@ Nuxt [Mongoose]{style="color: var(--color-primary-500)"}
 A Nuxt module for simplifying the use of [Mongoose](https://mongoosejs.com/) in your project.
 
 #support
-  ::terminal
-  ---
-  content:
-  - npm i nuxt-mongoose -D
-  ---
-  ::
+  :illustration
 ::
 
-<!-- TODO: features -->
+::card-grid
+#title
+<h1 class="center">Elevate Your <br/> <span class=highlight> Developer Experience</span></h1>
+
+#root
+:ellipsis{left=15rem width=40rem top=10rem blur=140px}
+
+#default
+  ::card{icon=tabler:code}
+  #title
+  Nuxt DevTools Support
+  #description
+  Dive into your database with confidence. Benefit from Nuxt Devtools support, allowing you to inspect and debug your DB operations seamlessly.
+  ::
+
+  ::card{icon=tabler:cloud-bolt}
+  #title
+  Auto Connection
+  #description
+  Forget about manual connection hassles. This module seamlessly handles the connection to your Mongoose database, making setup a breeze.
+  ::
+
+  ::card{icon=tabler:plug}
+  #title
+  Extendable & hackable
+  #description
+  This module grants you access to the full spectrum of Mongoose functionalities. Leverage the power of Mongoose in your project.
+  ::
+
+::
+
+<style>
+  .highlight {
+    color: var(--color-primary-500);
+  }
+
+  .center {
+    text-align: center;
+  }
+  .card svg {
+    height: 3rem!important;
+    width: 3rem!important;
+  }
+  .support {
+    display: flex;
+    justify-content: center;
+  }
+</style>

docs/content/1.docs/1.getting-started/1.setup.md

@@ -40,7 +40,7 @@ export default defineNuxtConfig({
 ## Options
 
 You can configure the module by adding a `mongoose` section to your `nuxt.config` file.
-read more about [Mongoose options](/getting-started/configuration).
+read more about [Mongoose options](/docs/getting-started/configuration).
 
 ```ts [nuxt.config]
 export default defineNuxtConfig({

docs/content/1.docs/2.api/1.utils.md

@@ -54,7 +54,12 @@ This function creates a new Mongoose model with schema. Example usage:
 | `hooks` | [`(schema: Schema<T>) => void`](https://mongoosejs.com/docs/middleware.html) | false | Schema Hooks Function to customize Model |
 
 
-
+::alert
+you can access the default connection with importing it from mongoose:
+::
+```
+import { connection } from 'mongoose'
+```
 
 ## `defineMongooseConnection`
 This function creates a new Mongoose connection.

docs/content/1.docs/2.api/3.examples.md

@@ -0,0 +1,5 @@
+# Examples
+
+Here are a few examples:
+
+- Nuxt Mongoose Minimal: [:icon{name="tabler:brand-github"} Github](https://github.com/arashsheyda/nuxt-mongoose-minimal) [:icon{name="tabler:world"} Website](https://nuxt-mongoose-minimal.vercel.app/)

docs/content/1.docs/_dir.yml

@@ -0,0 +1 @@
+icon: tabler:file-description

docs/content/2.playground/1.index.md

@@ -0,0 +1,5 @@
+# Playground
+
+:ellipsis{right=0px width=75% blur=150px}
+
+:sandbox{src="https://stackblitz.com/github/arashsheyda/nuxt-mongoose-minimal"}

docs/content/2.playground/_dir.yml

@@ -0,0 +1 @@
+icon: tabler:play-volleyball

docs/content/3.releases/_dir.yml

@@ -0,0 +1,3 @@
+title: Releases
+icon: tabler:clipboard-text
+navigation.redirect: https://github.com/arashsheyda/nuxt-mongoose/releases

docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "docus-starter",
+  "name": "nuxt-mongoose-docs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -10,8 +10,8 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.14.3",
-    "@nuxthq/studio": "^0.13.4",
-    "nuxt": "^3.6.3"
+    "@nuxt-themes/docus": "^1.15.0",
+    "@nuxthq/studio": "^1.0.8",
+    "nuxt": "^3.9.3"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-mongoose",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.0.5",
   "private": false,
   "packageManager": "pnpm@8.7.4",
   "description": "Nuxt 3 module for MongoDB with Mongoose",
@@ -10,7 +10,7 @@
   "homepage": "https://nuxt-mongoose.nuxt.space",
   "repository": {
     "type": "git",
-    "url": "https://github.com/arashsheyda/nuxt-mongoose"
+    "url": "git+https://github.com/arashsheyda/nuxt-mongoose"
   },
   "bugs": {
     "url": "https://github.com/arashsheyda/nuxt-mongoose/issues"
@@ -39,38 +39,36 @@
     "dist"
   ],
   "scripts": {
-    "prepare": "nuxt-module-build --stub && nuxi prepare client",
     "build": "nuxt-module-build && npm run build:client",
     "build:client": "nuxi generate client",
     "dev": "nuxi dev playground",
+    "dev:prepare": "nuxt-module-build && nuxi prepare client",
     "dev:client": "nuxi dev client --port 3300",
     "dev:prod": "npm run build && npm run dev",
     "release": "npm run lint && npm run build && changelogen --release && npm publish",
     "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^0.8.2",
-    "@nuxt/devtools-ui-kit": "^0.8.2",
-    "@nuxt/kit": "^3.7.1",
-    "@vueuse/core": "^10.4.1",
-    "defu": "^6.1.2",
-    "fs-extra": "^11.1.1",
-    "mongoose": "^7.5.2",
+    "@nuxt/devtools-kit": "1.0.8",
+    "@nuxt/devtools-ui-kit": "1.0.8",
+    "@nuxt/kit": "^3.9.3",
+    "@vueuse/core": "^10.7.2",
+    "defu": "^6.1.4",
+    "fs-extra": "^11.2.0",
+    "mongoose": "^8.1.0",
     "ofetch": "^1.3.3",
-    "pathe": "^1.1.1",
+    "pathe": "^1.1.2",
     "pluralize": "^8.0.0",
-    "sirv": "^2.0.3"
+    "sirv": "^2.0.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.41.0",
-    "@nuxt/module-builder": "^0.5.1",
-    "@types/fs-extra": "^11.0.2",
-    "@types/pluralize": "^0.0.30",
+    "@antfu/eslint-config": "2.6.3",
+    "@nuxt/module-builder": "^0.5.5",
+    "@types/fs-extra": "^11.0.4",
+    "@types/pluralize": "^0.0.33",
     "changelogen": "^0.5.5",
-    "eslint": "8.48.0",
-    "nuxt": "^3.7.1",
-    "sass": "^1.67.0",
-    "sass-loader": "^13.3.2",
-    "splitpanes": "^3.1.5"
+    "eslint": "8.56.0",
+    "nuxt": "^3.9.3",
+    "sass": "^1.69.7"
   }
 }

playground/app.vue

@@ -1,8 +1,14 @@
-<script setup>
+<script setup lang="ts">
+const { data } = await useFetch('/api/users')
 </script>
 
 <template>
   <div>
     Nuxt module playground!
+    <br>
+    <pre
+      v-html="JSON.stringify(data, null, 2)"
+      style="background: #131313;color: #4EA65A;padding: 20px;border-radius: 7px;text-shadow: 0px 0px 10px #00ff22;"
+    />
   </div>
 </template>

src/module.ts

@@ -8,6 +8,7 @@ import {
 import type { ConnectOptions } from 'mongoose'
 import defu from 'defu'
 import { join } from 'pathe'
+import mongoose from 'mongoose'
 import { $fetch } from 'ofetch'
 import { version } from '../package.json'
 import { setupDevToolsUI } from './devtools'
@@ -18,27 +19,27 @@ export interface ModuleOptions {
    *
    * @default process.env.MONGODB_URI
    *
-  */
+   */
   uri: string | undefined
   /**
    *  Nuxt DevTools
    *
    * @default true
    *
-  */
+   */
   devtools: boolean
   /**
    *  Mongoose Connections
    *
    * @default {}
-  */
+   */
   options?: ConnectOptions
   /**
    *  Models Directory for auto-import
    *
    * @default 'models'
    *
-  */
+   */
   modelsDir?: string
 }
 
@@ -54,6 +55,11 @@ export default defineNuxtModule<ModuleOptions>({
     options: {},
     modelsDir: 'models',
   },
+  hooks: {
+    close: () => {
+      mongoose.disconnect()
+    },
+  },
   async setup(options, nuxt) {
     if (nuxt.options.dev) {
       $fetch('https://registry.npmjs.org/nuxt-mongoose/latest').then((release) => {

src/runtime/server/services/connection.ts

@@ -0,0 +1,21 @@
+import type { ConnectOptions } from 'mongoose'
+import { consola } from 'consola'
+import { colors } from 'consola/utils'
+import mongoose from 'mongoose'
+
+// @ts-ignore
+import { useRuntimeConfig } from '#imports'
+
+export async function defineMongooseConnection({ uri, options }: { uri?: string; options?: ConnectOptions } = {}): Promise<void> {
+  const config = useRuntimeConfig().mongoose
+  const mongooseUri = uri || config.uri
+  const mongooseOptions = options || config.options
+
+  try {
+    await mongoose.connect(mongooseUri, { ...mongooseOptions })
+    consola.success('Connected to MongoDB')
+  }
+  catch (err) {
+    consola.error(colors.red(`Error connecting to MongoDB: ${err}`))
+  }
+}

src/runtime/server/services/index.ts

@@ -1,50 +1,2 @@
-import { logger } from '@nuxt/kit'
-import mongoose from 'mongoose'
-import type { ConnectOptions, Model, SchemaDefinition, SchemaOptions } from 'mongoose'
-
-import { useRuntimeConfig } from '#imports'
-
-export async function defineMongooseConnection({ uri, options }: { uri?: string; options?: ConnectOptions } = {}): Promise<void> {
-  // TODO: types
-  const config = useRuntimeConfig().mongoose
-  const mongooseUri = uri || config.uri
-  const mongooseOptions = options || config.options
-
-  try {
-    await mongoose.connect(mongooseUri, { ...mongooseOptions })
-    logger.success('Connected to `MongoDB`')
-  }
-  catch (err) {
-    logger.error('Error connecting to `MongoDB`', err)
-  }
-}
-
-export function defineMongooseModel<T>(
-  nameOrOptions: string | {
-    name: string
-    schema: SchemaDefinition
-    options?: SchemaOptions
-    hooks?: (schema: mongoose.Schema<T>) => void
-  },
-  schema?: SchemaDefinition,
-  options?: SchemaOptions,
-  hooks?: (schema: mongoose.Schema<T>) => void,
-): Model<T> {
-  let name: string
-  if (typeof nameOrOptions === 'string') {
-    name = nameOrOptions
-  }
-  else {
-    name = nameOrOptions.name
-    schema = nameOrOptions.schema
-    options = nameOrOptions.options
-    hooks = nameOrOptions.hooks
-  }
-
-  const newSchema = new mongoose.Schema<T>(schema, options as any)
-
-  if (hooks)
-    hooks(newSchema)
-
-  return mongoose.model<T>(name, newSchema)
-}
+export { defineMongooseConnection } from './connection'
+export { defineMongooseModel } from './model'

src/runtime/server/services/model.ts

@@ -0,0 +1,32 @@
+import type { Model, SchemaDefinition, SchemaOptions } from 'mongoose'
+import mongoose from 'mongoose'
+
+export function defineMongooseModel<T>(
+  nameOrOptions: string | {
+    name: string
+    schema: SchemaDefinition<T>
+    options?: SchemaOptions
+    hooks?: (schema: mongoose.Schema<T>) => void
+  },
+  schema?: SchemaDefinition<T>,
+  options?: SchemaOptions,
+  hooks?: (schema: mongoose.Schema<T>) => void,
+): Model<T> {
+  let name: string
+  if (typeof nameOrOptions === 'string') {
+    name = nameOrOptions
+  }
+  else {
+    name = nameOrOptions.name
+    schema = nameOrOptions.schema
+    options = nameOrOptions.options
+    hooks = nameOrOptions.hooks
+  }
+
+  const newSchema = new mongoose.Schema<T>(schema, options as any)
+
+  if (hooks)
+    hooks(newSchema)
+
+  return mongoose.model<T>(name, newSchema)
+}