THREE is Not Defined

[wildy13]

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "gsap": "^3.12.5",
    "nuxt": "^3.12.4",
    "three": "^0.167.1",
    "three-mesh-ui": "^6.5.4",
    "vue": "latest"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.12.1"
  }
}

What's going on, ive three on there, but the error said Three is not defined

this is my code

import { onMounted, ref } from 'vue';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import * as THREE from 'three';
import { ARButton } from 'three/addons/webxr/ARButton.js';
import ThreeMeshUI from "three-mesh-ui";
...

i hopes, my senior can fix it or can gimme suggestion, thanx