How to create a package for Vue3 app?

You have created a very nice Vue component that you want to share with everyone and that can be used by your name,
Then it's the right opportunity to convert your component into a package and publish on npm.

Today I will go through all steps that you need to cover for publishing a Vue package.

1. First you need NPM account, that you can create from here.
2. Second you need standalone Vue project running on vue-cli or webpack or vite(doesn't matter).
3. Third and last thing you need is index.js file which exports things.

Things? Yes it can be anything function, object, variable.
You can export multiple things too.
If you want to export some global identifier, export an object containing "install" function.

Let's start with example, I have created a package for validation functionality behaving just like vee-validate version-2.
Click here to jump to code.

Let's start with package.json

{
  "name": "vue-nice-validate",
  "version": "3.1.1",
  "main": "src/index.js",
  "homepage": "https://github.com/yogeshgalav/vue-nice-validate",
  "repository": {
    "type": "git",
    "url": "https://github.com/yogeshgalav/vue-nice-validate"
  },
  "bugs": {
    "url": "https://github.com/yogeshgalav/vue-nice-validate/issues"
  },
  "description": "Vue validation library in form of mixin.",
  "keywords": [
    "vue nice validate"
  ],
...
}

We will discuss only npm and publish related things other are as usual.

1. Name: it is the unique name of you package, if it's already acquired on npm then you have to find another one.
2. Version: you can publish a single version of your package only once so carefully test your package before publishing otherwise you have to upgrade version each time.
3. Main: it is the path to your index file which exports your package's main entities.
4. Homepage: This link including repository and bugs will be displayed on your npm package on right side.
5. Description and keywords: Last but not least description and keywords will help people to search and identify your repo so write beautifully.

Now let's look at our main file src/index.js

import VueNiceValidate from "./VueNiceValidate";

export default {
  install: (app, options) => {
    app.config.globalProperties.$validator = VueNiceValidate;

    app.directive("validate", VueNiceValidate.ValidateDirective);
  }
};

export const fieldErrors = VueNiceValidate.field_errors;
export const validateForm = VueNiceValidate.validateForm;
export const validateDirective = VueNiceValidate.validateDirective;

Here plugin is exported as default, fieldError is variable, validateForm is simple function and validateDirective is function defining directive.
All the main code is written in VueNiceValidate.js just to keep index.js short and sweet.
Now as per JS rule,

Every module can have two different types of export, named export and default export. You can have multiple named exports per module but only one default export.

So I have exported Vue plugin(object containing install fn) as default and others as named export.

Hence, if you want to use this package in your xyz project, here's what import declaration would look like.

Globally import plugin

import ValidatePlugin from 'vue-nice-validate';
const app = createApp(App);
app.use(ValidatePlugin);

Locally import items

import { validateInputs, validateDirective, fieldErrors } from 'vue-nice-validate';
const vValidate = validateDirective;

Last thing you need to login npm from your terminal and publish your package with a single command.

npm publish

That's it. The npm package is just a simple concept of import export, I hope you enjoyed reading this and it motivate's you to publish your next awesome npm package.

Please give your love and support to my open source packages.

Thank You and Have Nice Day!