Injective Typescript Configuring Nuxt
Nuxt3 - интуитивно понятный веб-фреймворк
Предпочтительным выбором UI-фреймворка для создания децентрализованных приложений поверх Injective в @InjectiveLabs является Nuxt3. Мы поможем вам настроить Nuxt3 + конструктор Vite с пакетами @injectivelabs и некоторыми полифиллами, поскольку они понадобятся вам для взаимодействия с криптовалютными кошельками.
1. Установка Nuxt 3
Следуя руководству по началу работы на сайте Nuxt3 Docs, настройте ваше приложение.
2. Установка пакетов @injectivelabs
Вы можете установить пакеты @injectivelabs с помощью yarn.
$ yarn add @injectivelabs/sdk-ts @injectivelabs/networks @injectivelabs/ts-types @injectivelabs/utils
## If you need Wallet Connection $ yarn add @injectivelabs/wallet-ts
Это наиболее часто используемые пакеты из монорежима injective-ts.
3. Настройка Nuxt и добавление полифиллов
Сначала добавьте необходимые пакеты полифиллов
$ yarn add @bangjelkoski/node-stdlib-browser $ yarn add -D @bangjelkoski/vite-plugin-node-polyfills
Убедитесь, что вы используете версии vue-tsc@^1.2.0, nuxt@^3.3.3, typescript@^4.9.5.
Буфер
Одной из основных зависимостей для любого децентрализованного приложения, связанного с криптовалютами, является Buffer. Чтобы убедиться в том, что мы добавили Buffer в наш проект, мы можем установить его как зависимость, а затем сделать плагин Nuxt для импорта его в объект global/window:
// filename - plugins/buffer.client.ts export default defineNuxtPlugin(() => { import('buffer/').then((Buffer) => { window.Buffer = window.Buffer || Buffer.default.Buffer globalThis.Buffer = window.Buffer || Buffer.default.Buffer }) })
4. Использование управления состоянием
Если вы собираетесь использовать pinia в качестве управления состоянием, добавьте его в свои пакеты:
5. Использование vueuse
Мы рекомендуем добавить @vueuse/nuxt в качестве зависимости, так как он предлагает множество полезных функций из коробки.
Затем необходимо настроить tsconfig.json, если вы используете TypeScript (рекомендуется). За основу можно взять следующий tsconfig.json.
{ // https://nuxt.com/docs/guide/concepts/typescript "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "strict": true, "module": "esnext", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "types": [ "@vueuse/nuxt", "@pinia/nuxt", ] }, "exclude": [ "node_modules", "dist", ".output" ], }
6. nuxt.config.ts / packages.json
Прежде чем загружать наше приложение, необходимо все настроить в nuxt.config.ts - основной точке конфигурации каждого приложения Nuxt 3. Рассмотрим эталонный nuxt.config.ts и поясним каждую строку с помощью комментариев, чтобы разработчикам было проще разобраться.
// filename - nuxt.config.ts import { nodePolyfills } from "@bangjelkoski/vite-plugin-node-polyfills";
export default defineNuxtConfig({ ssr: false, // whether to pre-render your application modules: [ // nuxtjs modules "@pinia/nuxt", "@vueuse/nuxt", ],
typescript: { typeCheck: "build", // we recommend build so you do typescript checks only on build type },
imports: { // automatic imports of store definitions (if you use pinia) dirs: ["store/**"], },
pinia: { // import pinia definitions autoImports: ["defineStore"], },
plugins: [{ // import the buffer plugin we've made src: "./plugins/buffer.client.ts", ssr: false }],
// We generate only sitemaps for the client side as we don't need a server // Note: there is a problem with sitemaps for Vite + Nuxt3 // as usually is that it takes to much time/memory to generate // sitemaps and the build process can fail // on Github Actions/Netlify/Vercel/etc so we have to use another // strategy like generating them locally and them pushing them to services like // busgnag sourcemap: { server: false, client: true, },
// Vite related config vite: { define: { "process.env": JSON.stringify({}), "process.env.DEBUG": JSON.stringify(process.env.DEBUG), },
plugins: [ // setting up node + crypto polyfils nodePolyfills({ protocolImports: false }) ],
build: { sourcemap: false, // we don't generate
// default rollup options rollupOptions: { cache: false, output: { manualChunks: (id: string) => { // }, }, }, },
// needed for some Vite related issue for the // @bangjelkoski/vite-plugin-node-polyfills plugin optimizeDeps: { exclude: ["fsevents"], }, }, });
Есть одна оптимизация, которая позволяет уменьшить размер пакета - добавьте эти разрешения в packages.json
"resolutions": { "@ethereumjs/tx": "^4.1.1", "**/libsodium": "npm:@bangjelkoski/noop", "**/libsodium-wrappers": "npm:@bangjelkoski/noop" }
7. Загрузка нашего приложения
Наконец, вы можете запустить приложение локально с помощью yarn dev или сгенерировать статические страницы с помощью yarn generate, которые можно развернуть на любом хостинге статических страниц, например Netlify, Vercel и т.д.