Publish a Nuxt 3 app/components on npm that is usable by normal Vue 3 without Nuxt

Question

The usual way for me publishing a vue component is based on this video. And for Nuxt 3, the workflow is way easier, almost nothing much to configure just npm publish and then just install the package, use extend, and it's just work.

So my question is, how to configure a Nuxt 3 app that can cater for both Nuxt3 and Vue project(without Nuxt). So does it mean I still need to use index.js, then configure my nuxt.config

nuxt.config

vite:{
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/index.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
}

I also have configuration for gh-pages

nuxt.config

  app: {
    baseURL: process.env.NODE_ENV === "production" ? "/my-repo-name/" : "/",
    buildAssetsDir: "assets",
  },

how do I make a config that use different build if I want to run them separately

What I have currently

for my gh-pages

package.json

    "deploy": "nuxt generate && gh-pages --dotfiles -d .output/public"

and build for npm

package.json

    "npmx": "nuxt build .npm-publish",

The result produced by nuxt build is something I'm not familiar with to the normal vite build that I had before. It does look like usual nuxt build output. So how do I solve this? Any suggestion or links I can look up for? Thanks

Answer 1

So to use the files like components and layout, we can just publish the corresponding folders to npm. So it will be just Vue files when we import.
The package.json of the nuxt project

{
"name": "@harikrishnan_pv/test-buttons",
"version": "1.0.6",
"description": "A collection of reusable Nuxt 3 components",
"files": [
"components",// to include components folder
"layouts" // to include layouts folder
],
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
}, "keywords": [
"nuxt3",
"components",
"reusable"
],
"author": "harikrishnan p v",
"license": "MIT",
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/tailwindcss": "^6.10.1",
"nuxt": "^3.8.2",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
}
}

so in npm it will be vue pages.
The published npm package

Install it in nuxt or vue project and import where ever you want

import blue from '@harikrishnan_pv/test-buttons/components/Button/blue.vue';

replace "blue" with your component name and the "@harikrishnan_pv/test-buttons/components/Button/blue.vue" with your path

for example you can try mine :- npm i @harikrishnan_pv/test-buttons