toni Posts - Answer Overflow

In Nuxt 2 I had a workflow where I would set the buildDir to ./releases/v{latest-version} and then have a link in that folder current to the latest version for NGINX to have a seamless upgrade process. But now when I set buildDir in Nuxt 3 and run nuxt prepare before the build I run into problems because in tsconfig.json I have hard-coded

{
  "extends": "./.nuxt/tsconfig.json",
}

{
  "extends": "./.nuxt/tsconfig.json",
}

I could change it, but since the directory name is dynamic, what can I do? Currently I get

[vite:vue] failed to resolve "extends":"./.nuxt/tsconfig.json" in /webapps/journalistic-pwa/frontend/tsconfig.json

[vite:vue] failed to resolve "extends":"./.nuxt/tsconfig.json" in /webapps/journalistic-pwa/frontend/tsconfig.json

1 replies

NNuxt

•Created by toni on 2/17/2023 in #❓・help

How to access types of auto-imported components?

Currently I'm doing this to type template refs according to: https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs Like so:

import AppDropdown from '~/components/app/dropdown/Dropdown.vue'
import EntryDetail from '~/components/entry/Detail.vue'

const dropdown = $ref<InstanceType<typeof AppDropdown> | null>(null)
const entryDetail = $ref<InstanceType<typeof EntryDetail> | null>(null)

import AppDropdown from '~/components/app/dropdown/Dropdown.vue'
import EntryDetail from '~/components/entry/Detail.vue'

const dropdown = $ref<InstanceType<typeof AppDropdown> | null>(null)
const entryDetail = $ref<InstanceType<typeof EntryDetail> | null>(null)

Is there a way to access the types of the auto-imported comps without explicitly importing them? Something like:

const dropdown = $ref<InstanceType<typeof #imports.AppDropdown> | null>(null)

const dropdown = $ref<InstanceType<typeof #imports.AppDropdown> | null>(null)

1 replies

NNuxt

•Created by toni on 1/7/2023 in #❓・help

Did anybody setup https successfully for the dev server?

Having trouble getting it to work and the docs are quite limited. What I'm trying to do is access the dev server from my phone via the local network, e.g. under 192.168.1.5:3000. That used to work in Nuxt 2 with cross-env, but now I'm getting ssl errors. I don't understand if it should be enough to start it like nuxt dev --https (which would be the epic DX way) or if I need to generate a certificate myself.

1 replies

NNuxt

•Created by toni on 12/29/2022 in #❓・help

Problem with GitHub actions

I basically copied the nuxt/framework config for GitHub actions to build, lint, and typecheck my project, but all jobs fail with

ERR_PNPM_PREPARE_PKG_FAILURE  Command failed with exit code 1: npm install

ERR_PNPM_PREPARE_PKG_FAILURE  Command failed with exit code 1: npm install

See here: https://github.com/toniengelhardt/m3tadata/actions/runs/3802847961/jobs/6468721641 The project uses pnpm and not npm, so I'm a bit confused why it wants to execute npm install at all. What am I missing?

6 replies

NNuxt

•Created by toni on 12/13/2022 in #❓・help

How to auto-import composables from a plugin?

Specifically interested in using the vagmi plugin (https://github.com/wobsoriano/vagmi) in Nuxt. The plugin works with this setup:

import { VagmiPlugin, chain, configureChains, createClient } from 'vagmi'
import { publicProvider } from 'vagmi/providers/public'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  const { provider, webSocketProvider } = configureChains(
    [
      chain.mainnet,
      chain.optimism,
      chain.arbitrum,
      chain.polygon,
    ],
    [publicProvider()],
  )
  const client = createClient({
    autoConnect: true,
    provider,
    webSocketProvider,
  })
  const vagmi = VagmiPlugin(client)
  nuxtApp.vueApp.use(vagmi)
})

import { VagmiPlugin, chain, configureChains, createClient } from 'vagmi'
import { publicProvider } from 'vagmi/providers/public'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  const { provider, webSocketProvider } = configureChains(
    [
      chain.mainnet,
      chain.optimism,
      chain.arbitrum,
      chain.polygon,
    ],
    [publicProvider()],
  )
  const client = createClient({
    autoConnect: true,
    provider,
    webSocketProvider,
  })
  const vagmi = VagmiPlugin(client)
  nuxtApp.vueApp.use(vagmi)
})

But I would like to auto-import all the composables from the plugin, is that possible? And if yes, how?

4 replies

NNuxt

•Created by toni on 12/5/2022 in #❓・help

How to add modules to auto-imports?

In my app I have many components and pages with this import:

import { ethers, utils } from 'ethers'

import { ethers, utils } from 'ethers'

Is there a way to add it to auto-imports and potentially rename it, aka. utils to ethersUtils or smth like that?

5 replies

Gaming

Programming