humblemodulo Posts - Answer Overflow

humblemodulo

Explore posts from servers

•Created by humblemodulo on 12/22/2024 in #❓・help

Typescript autocompletion in ".vue" files "broken"

TL;DR TS import autocompletion works in ".ts" files, but no longer works in ".vue" files Note: Had been saving the application locally, but didn't have a git commit that I could roll back to (in case it's code/config related) Hi All, Currently using VS Codium.
I'm not sure what's gone wrong, but I am no longer getting proper autocomplete functionality in ".vue" files. All ".ts" files work just fine. For example, if I begin typing import MyCustomCom ... in ".ts" files, I'll begin to get component and file recommendations. However, this functionality is completely gone in ".vue" files. I did update to the latest version of "Vue Official" in the last 24 hours, and that seems to be when things went wrong. However, I've tried force rolling back to earlier versions, but nothing changes. My current (now veeeeeery different) "tsconfig.json" looks like so:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "types": [
      "@types/node",
      "@nuxt/image",
      "@nuxt/types",
      "@trpc/client",
      "@trpc/server",
    ],
    "baseUrl": ".",
    "paths": {
      "@@/app/*": [
        "./app/*"
      ],
      "~~/server/*": [
        "./server/*"
      ]
    }
  },
  "include": [
    ".nuxt/nuxt.d.ts",
    "./types/**/*",
    "./app/**/*.{ts,js}",
    "./server/**/*.{ts,js}" // Removed the trailing comma here
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

nuxt.config.ts looks like so:

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

import { defineNuxtConfig } from "nuxt/config"
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  devtools: { enabled: false },
  typescript: {
    strict: true,
    typeCheck: true
  },
  build: {
    transpile: ['trpc-nuxt']  // Add these
  },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  compatibilityDate: '2024-12-21'
})

What completely obvious configuration am I missing? 🤔

6 replies

TtRPC

•Created by humblemodulo on 9/2/2024 in #❓-help

trpc with Nuxt 4

I'm having trouble trying to use trpc with Nuxt 4. I've moved plugins to the app directory as per the new structure, but following the trpc-nuxt instructions otherwise (https://trpc-nuxt.vercel.app/get-started/usage/recommended). The returned $client value is a Proxy instance that has no capabilities otherwise. Anyone able to provide some insight as to the issue, or perhaps a better way to go about it? Perhaps using trpc directly without any Nuxt-specific bindings? 🤔

3 replies

Gaming

Programming