Storage ClientInstallation
Installation
Install and set up the storage client for your framework
Last updated:
Installation
Install the storage client package and the required framework dependencies.
Prerequisites
The storage client requires TanStack Query (formerly React Query) for state management. You'll need to install the appropriate version for your framework:
- React:
@tanstack/react-query>= 5.90.10 - Vue:
@tanstack/vue-query>= 5.91.2 - Solid:
@tanstack/solid-query>= 5.90.13 - Svelte:
@tanstack/svelte-query>= 6.0.8
React
npm install @visulima/storage-client @tanstack/react-query reactyarn add @visulima/storage-client @tanstack/react-query reactpnpm add @visulima/storage-client @tanstack/react-query reactSetup QueryClient
Wrap your app with QueryClientProvider:
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
const queryClient = new QueryClient();
function App({ children }: { children: ReactNode }) {
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}Vue / Nuxt
npm install @visulima/storage-client @tanstack/vue-query vueyarn add @visulima/storage-client @tanstack/vue-query vuepnpm add @visulima/storage-client @tanstack/vue-query vueSetup QueryClient
For Vue 3:
import { createApp } from "vue";
import { VueQueryPlugin } from "@tanstack/vue-query";
const app = createApp(App);
app.use(VueQueryPlugin);
app.mount("#app");Nuxt 3 Setup
Create a plugin file:
// plugins/vue-query.client.ts
import { VueQueryPlugin } from "@tanstack/vue-query";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueQueryPlugin);
});Solid
npm install @visulima/storage-client @tanstack/solid-query solid-jsyarn add @visulima/storage-client @tanstack/solid-query solid-jspnpm add @visulima/storage-client @tanstack/solid-query solid-jsSetup QueryClient
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
const queryClient = new QueryClient();
function App() {
return <QueryClientProvider client={queryClient}>{/* Your app */}</QueryClientProvider>;
}Svelte
npm install @visulima/storage-client @tanstack/svelte-query svelteyarn add @visulima/storage-client @tanstack/svelte-query sveltepnpm add @visulima/storage-client @tanstack/svelte-query svelteSetup QueryClient
<script lang="ts">
import { QueryClient, QueryClientProvider } from "@tanstack/svelte-query";
const queryClient = new QueryClient();
</script>
<QueryClientProvider client={queryClient}>
<!-- Your app -->
</QueryClientProvider>Import Paths
Import hooks/composables from framework-specific paths:
// React
import { useUpload } from "@visulima/storage-client/react";
// Vue
import { useUpload } from "@visulima/storage-client/vue";
// Solid
import { createUpload } from "@visulima/storage-client/solid";
// Svelte
import { createUpload } from "@visulima/storage-client/svelte";TypeScript Support
The package includes full TypeScript definitions. No additional @types packages are required.
Next Steps
- React Guide - Learn how to use the storage client with React
- Vue / Nuxt Guide - Learn how to use the storage client with Vue and Nuxt
- Solid Guide - Learn how to use the storage client with Solid
- Svelte Guide - Learn how to use the storage client with Svelte