cd test3
npm install

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'
// Or for other frameworks:
// import { svelte } from "@sveltejs/vite-plugin-svelte";
// etc.
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from "rollup-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()], // Or svelte(), etc.
  resolve: {
    alias: {
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
      events: "rollup-plugin-node-polyfills/polyfills/events",
      assert: "assert",
      crypto: "crypto-browserify",
      util: "util",
    },
  },
  define: {
    "process.env": process.env ?? {},
  },
  build: {
    target: "esnext",
    rollupOptions: {
      plugins: [nodePolyfills({ crypto: true })],
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
    },
  },
});

<script>
  window.global = window;
</script>

npm run build
npm run preview

import { ref } from 'vue'
import { Metaplex } from "@metaplex-foundation/js";
import { Connection, PublicKey } from "@solana/web3.js";

const connection = new Connection("https://api.devnet.solana.com");

//It is this line alone that is breaking everything. You can remove my function and button below. It never makes it past this line.
const metaplex = Metaplex.make(connection)

const getNft = async () => {
  let mintAddress = prompt("Collection Mint Address:");
  if (!mintAddress) return;
  mintAddress = new PublicKey(mintAddress);
  const nft = await metaplex.nfts().findByMint({ mintAddress });  
  console.log(nft);
  return nft;
}

//On top of the existing button from the template i placed the following button to trigger the above function
<button type="button" @click="getNft()">Look Up NFT</button>

npm run build
npm run preview