feat: add auto-imports

Author: Hebilicious

.eslintrc

@@ -5,6 +5,8 @@
     "@typescript-eslint/comma-dangle": ["error", "never"],
     "comma-dangle": ["error", "never"],
     "yml/quotes": "off",
-    "antfu/if-newline": "off"
+    "antfu/if-newline": "off",
+    "curly": ["error", "multi-line"],
+    "object-property-newline": ["off", { "allowAllPropertiesOnSameLine": true}]
   }
 }

README.md

@@ -1,52 +1,51 @@
 # ⚗️ Vue Query Nuxt
 
 [![CI](https://github.com/Hebilicious/vue-query-nuxt/actions/workflows/ci.yaml/badge.svg)](https://github.com/Hebilicious/vue-query-nuxt/actions/workflows/ci.yaml)
-[![npm version](https://badge.fury.io/js/@hebilicious%2Fvue-query-nuxt.svg)](https://badge.fury.io/js/@hebilicious%2Fvue-query-nuxt)
+[![npm version](https://badge.fury.io/js/@hebilicious%20vue-query-nuxt.svg)](https://badge.fury.io/js/@hebilicious%20vue-query-nuxt)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 🚀 Welcome to __Vue Query Nuxt__!  
 
 This Nuxt Module automatically installs and configure Vue Query for your Nuxt application.
 It has 0 config out-of-the box and extremely lightweight.
 
-##  ⚠️ Disclaimer
+## Features
 
-_🧪 This module is in active development._
+- 0 config out-of-the box
+- All configurations options available
+- Auto Imports for Vue Query composables
 
 Refer to the [Vue Query documentation](https://tanstack.com/query/latest/docs/vue/quick-start) for more information about Vue Query.
 
-## 📦 Installation
+## 📦 How to use
 
-
-1. Use npm, pnpm or yarn to install the dependencies.
+### 1. Use npm, pnpm or yarn to install the dependencies.
 
 ```bash
+# npm
 npm i @hebilicious/vue-query-nuxt @tanstack/vue-query  
-```
-
-```bash
+# pnpm
 pnpm i @hebilicious/vue-query-nuxt @tanstack/vue-query  
+# yarn
+yarn add @hebilicious/vue-query-nuxt @tanstack/vue-query  
 ```
 
-```bash
-yarn i @hebilicious/vue-query-nuxt @tanstack/vue-query  
-```
+### 2. Add the modules to your Nuxt modules
 
-2. Add the modules to your Nuxt modules
+In `nuxt.config.ts` :
 
 ```ts
-// In nuxt.config.ts
 export default defineNuxtConfig({
   modules: ["@hebilicious/vue-query-nuxt"]
 })
 ```
 
-3. Use right away
+### 3. Use right away
 
-```html
-<script setup>
-import { useQueryClient, useQuery, useMutation } from '@tanstack/vue-query'
+In a vue component :
 
+```html
+<script setup lang="ts">
 // Access QueryClient instance
 const queryClient = useQueryClient()
 
@@ -84,28 +83,38 @@ function onButtonClick() {
 </template>
 ```
 
-4. Advanced configuration
+### 4. Advanced configuration
 
 You can specify the options under the vueQuery key in your nuxt.config.ts file.
 Everything is typed.
 
+In `nuxt.config.ts` :
+
 ```ts
-// In nuxt.config.ts
 export default defineNuxtConfig({
   modules: ["@hebilicious/vue-query-nuxt"],
   vueQuery: {
-    stateKey: "vue-query-nuxt",
+    // useState key used by nuxt for the vue query state.
+    stateKey: "vue-query-nuxt", // default
+    // If you only want to import some functions, specify them here.
+    // You can pass false or an empty array to disable this feature.
+    // default: ["useQuery", "useQueries", "useInfiniteQuery", "useMutation", "useIsFetching", "useIsMutating", "useQueryClient"]
+    autoImports: ["useQuery"],
+    // Pass the vue query client options here ...
     queryClientOptions: {
       defaultOptions: { queries: { staleTime: 5000 } } // default
     },
+    // Pass the vue query plugin options here ....
     vueQueryPluginOptions: {}
   }
 })
 ```
+
 If you need to modify the plugin that installs vue query, you can create a `vue-query.config.ts` file at the root of your project.
 
+In `vue-query.config.ts` :
+
 ```ts
-// vue-query.config.ts
 import { library } from "@example/libray"
 
 export default defineVueQueryPluginCallback((vueQueryOptions) => {
@@ -114,7 +123,7 @@ export default defineVueQueryPluginCallback((vueQueryOptions) => {
 })
 ```
 
-This callback will be run *directly* after the Vue Query plugin is installed, so you can use it to `provide` something.
+This callback will be run _directly_ after the Vue Query plugin is installed, so you can use it to `provide` something.
 This can be useful if you want to configure something that needs the `queryClient` or you want to provide a library in the same plugin.
 
 ## 📦 Contributing

packages/vue-query-nuxt/package.json

@@ -2,6 +2,12 @@
   "name": "@hebilicious/vue-query-nuxt",
   "type": "module",
   "version": "0.0.5",
+  "description": "A Nuxt module for Vue Query",
+  "author": {
+    "name": "Hebilicious",
+    "email": "xsh4k3@gmail.com",
+    "url": "https://twitter.com/its_hebilicious"
+  },
   "license": "MIT",
   "repository": "Hebilicious/vue-query-nuxt",
   "keywords": [

packages/vue-query-nuxt/src/module.ts

@@ -20,9 +20,8 @@ export default defineNuxtModule<VueQueryOptions>({
 
     logger.info(`Adding ${NAME} module...`)
 
-    const { ...options } = userOptions
     // 1. Set up runtime configuration
-    nuxt.options.runtimeConfig.public[configKey] = defu(nuxt.options.runtimeConfig.public[configKey], options, {})
+    nuxt.options.runtimeConfig.public[configKey] = defu(nuxt.options.runtimeConfig.public[configKey], userOptions, {})
 
     // 2. Add plugin
     addPlugin(resolve("./runtime/plugin"))
@@ -39,7 +38,10 @@ export default defineNuxtModule<VueQueryOptions>({
         const file = await loadFile(configFile)
         if (file.exports.pluginCallback || file.exports.default) {
           logger.success("Found vue-query.config.ts file")
-          if (!file.exports.pluginCallback) file.exports.pluginCallback = file.exports.default
+          if (!file.exports.pluginCallback) {
+            file.exports.pluginCallback = file.exports.default
+          }
+
           delete file.exports.default
           const { code } = generateCode(file) // We extract it with magicast...
           const shaked = await transform(code, { treeShaking: true, loader: "ts" }) // ...we clean it with esbuild.
@@ -84,6 +86,11 @@ export default defineNuxtModule<VueQueryOptions>({
       }
     })
 
+    // 6. Auto Imports tanstack composables
+    if (userOptions.autoImports && userOptions.autoImports.length > 0) {
+      addImports(userOptions.autoImports.map(name => ({ name, from: "@tanstack/vue-query" })))
+    }
+
     logger.success(`Added ${NAME} module successfully.`)
   }
 })

packages/vue-query-nuxt/src/runtime/utils.ts

@@ -4,14 +4,27 @@ import type { RuntimeConfig } from "nuxt/schema"
 export const NAME = "vue-query-nuxt" as const
 export const configKey = "vueQuery" as const
 
+const composables = [
+  "useQuery",
+  "useQueries",
+  "useInfiniteQuery",
+  "useMutation",
+  "useIsFetching",
+  "useIsMutating",
+  "useQueryClient"
+] as const
+
+type VueQueryComposables = typeof composables[number]
 export interface VueQueryOptions {
   stateKey: string
+  autoImports: VueQueryComposables[] | [] | false
   queryClientOptions: QueryClientConfig | undefined
   vueQueryPluginOptions: VueQueryPluginOptions
 }
 
 export const defaults: VueQueryOptions = {
   stateKey: NAME,
+  autoImports: [...composables],
   queryClientOptions: {
     defaultOptions: { queries: { staleTime: 5000 } }
   },

playgrounds/advanced/app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query"
-
 const { $createHooks, $test } = useNuxtApp()
 $test.log("hello")
 

playgrounds/simple/app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query"
-
 const { data, isLoading } = useQuery({
   queryKey: ["todos"],
   queryFn: () => $fetch("/api/todos")

test/fixtures/todos/app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query"
-
 const { data, suspense } = useQuery({
   queryKey: ["todos"],
   queryFn: () => $fetch("/api/todos")