Set up for publish Vue project to npm

Set up for npm package for german supermarket (poc)

Step by step to set up npm library project

Create project Vue 3 + TypeScript + Vite

yarn create vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

Add node types

yarn add @types/node --dev

Library mode

To publish your library, let's use the library mode. Change your vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'vueNttUi',
      fileName: 'vue-ntt-ui'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

Create your components

First, create components inside src/components folder. Then create a lib folder. This folder will contain a file main.ts:

import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
...

export { Component1, Component2, ... }
Import and export all the desired components.

Build component

Change the file package.json to:

{
  "name": "vue-ntt-ui", //Same name than  build.lib.filename in vite.config.ts
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/vue-ntt-ui.umd.cjs",
  "module": "./dist/vue-ntt-ui.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "types": "./dist/main.d.ts",
      "import": "./dist/vue-ntt-ui.js",
      "require": "./dist/vue-ntt-ui.umd.cjs"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --emitDeclarationOnly",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@types/node": "^22.13.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.6.2",
    "vite": "^6.0.5",
    "vue-tsc": "^2.2.0"
  }
}

After, change the tsconfig.json (if the file doens't exist, create it):

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "outDir": "dist",
    "declaration": true
  },
  "include": ["lib/**/*.ts", "lib/**/*.d.ts", "lib/**/*.tsx", "lib/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Finally, update the tsconfig.node.json:

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "composite": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "isolatedModules": true,
    "moduleDetection": "force",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

Run yarn again and to build the component run yarn build.

Copy static assets on build

To ensure that your style.css file is included in the dist build folder, you need to configure Vite to copy static assets during the build process. You can achieve this by using the ~ vite-plugin-static-copy ~ plugin.

First, install the plugin:

yarn add vite-plugin-static-copy --dev

Then, update the vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'src/style.css',
          dest: ''
        }
      ]
    })
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'VueWebComponentLibrary',
      fileName: 'vue-web-component-library'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

Adding Tailwind css to the project and the build bundles

Add required packages

yarn add postcss-import
yarn add @tailwindcss/postcss
yarn add autoprefixer
yarn add postcss@^8.0.0 --dev

Create postcss.config.ts

Create a postcss.config.ts file at the root of the project and add the following code:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("@tailwindcss/postcss"),
    require("autoprefixer"),
  ],
};

Create a dedicated css file

Then, create a dedicated CSS file in your /lib folder, let's call it library-styles.css. In this file, import your Tailwind directives:

@import 'tailwindcss';
@import 'tailwindcss/utilities';

Finally, import library-styles.css into your library's main entry point (lib/main.ts):

import './library-styles.css'; // Make sure to import the css file
// ... rest of your library's entry point code

Export the css generated

In order to be accessible from the host app, add the export in the package.json file:

"exports": {
    ...
    "./dist/vue-ntt-ui.css": {
      "import": "./dist/vue-ntt-ui.css",
      "require": "./dist/vue-ntt-ui.css"
    }
  },

Add Eslint + Prettier

First, run:

yarn add --dev --exact prettier

then create the file .prettierrc.js:

echo {}> .prettierrc.json

install eslint and plugin:

yarn add --dev eslint eslint-plugin-vue

we'll turn off ESLint's formatting rules that would conflict with Prettier.

yarn add --dev eslint-config-prettier
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D typescript-eslint

Create a .eslintrc.config.js on root, with:

import eslint from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import eslintPluginVue from "eslint-plugin-vue";
import globals from "globals";
import typescriptEslint from "typescript-eslint";

export default typescriptEslint.config(
  {
    ignores: ["*.d.ts", "**/coverage", "**/dist", ".gitignore", ".eslintrc.js"],
  },
  {
    extends: [
      eslint.configs.recommended,
      ...typescriptEslint.configs.recommended,
      ...eslintPluginVue.configs["flat/recommended"],
    ],
    files: ["**/*.{ts,vue}"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      globals: globals.browser,
      parserOptions: {
        parser: typescriptEslint.parser,
      },
    },
    rules: {
      "vue/multi-word-component-names": "off",
    },
  },
  eslintConfigPrettier
);

Let's add the following two items to the scripts section of the package.json

"scripts":{
  //...
  "lint": "eslint --fix src",
  "format": "prettier .  --write",
}

Publish

Remember to always update the version on package.json. Check about semantic versioning here: Link to docs.

Remember to always run npm run build before publishing.

To publish, enter your npm account. If you don't have one, create it. Run npm adduser and follow the instructions to login.

Finally, to publish your lib, run npm publish.

Go to your account on npm and check on Packages if you have successfully published your package.

Add changelogen

License

MIT