How to use npm module in a web project without know node.js

I am and ASP.Net developer and not familiar with node.js.

I found the following npm module which is a very nice date picker and I want to use it:

Persian Date & Time Picker For Vue.js

How can I make a simple .js file to include in my html file and use this date picker without going through node.js like when I use bootstrap?

I'm in a project and I cannot learn node.js right now.

Just Including a .js file

You can use a tool like browserify's CDN in order to convert the file into a .js file and get:

https://wzrd.in/standalone/vue-persian-datetime-picker@latest

You can then include it in a script tag:

<script src='https://wzrd.in/standalone/vue-persian-datetime-picker@latest'></script>

Which would define a window.vuePersianDatetimePicker property you can use.

What you should probably do

You don't need to know Node.js or use it in your backend in order to use a frontend NPM component. Knowing helps but it's not a must.

Note that the Vue CLI and other related tools are all Node programs.

Node isn't scary (promise), it's not easy and takes time to learn to use well - but as someone who does both Node.js and ASP.net a lot of the concepts map nicely.

You'd:

Use Vue from the CLI

See installing the CLI if you don't have it installed.

vue create my-project

This means you initialize vue from the CLI (or do manual set up - which would require learning webpack).

In practice - almost no one ever includes Vue as a <script> tag since you need a lot of surrounding code anyway (like making all the files into a single file - bundling).

Install the module

NPM is the NuGet of the JavaScript world - it's also much much bigger.

npm install vue-persian-datetime-picker --save

Import it in your code

import VuePersianDatetimePicker from 'vue-persian-datetime-picker'

Here, the fact we npm installed the module means we can import it.