How To

Install in Vue projects?

To install as a plugin/package/library/extension and whatever, generally the "DaoDropdown",

1. You need to open the directory of your project using CMD/Terminal.
2. Then, write this script: npm install @dao-vue/dropdown
3. And wait till the installation ends. So then you can begin using.

Use it by including a CDN.

Now, I show you many ways of using CDN and JS files. Before using any CDN link, let's get acquainted with them. So, you should know if you don't know what is modularity. If you want to use more effective one choose UMD version.

CJS - CJS is short for CommonJS. Some of you know it from Node. Because it uses CJS module format. CJS imports module synchronously.You can import from a library node_modules or local dir. Either by const myLocalModule = require('./some/local/file.js') or var React = require('react'); works. When CJS imports, it will give you a copy of the imported object. CJS will not work in the browser. It will have to be transpiled and bundled.

ESM - ESM stands for ES Modules. It is Javascript's proposal to implement a standard module system. Works in many modern browsers It has the best of both worlds: CJS-like simple syntax and AMD's async Tree-shakeable, due to ES6's static module structure ESM allows bundlers like Rollup to remove unnecessary code, allowing sites to ship less codes to get faster load. Even can be called in HTML and this may not work 100% in all browsers yet.

AMD - AMD stands for Asynchronous Module Definition. AMD imports modules asynchronously (hence the name). AMD is made for frontend (when it was proposed) (while CJS backend). AMD syntax is less intuitive than CJS. I think of AMD as the exact opposite sibling of CJS.

UMD - UMD stands for Universal Module Definition. Works on front and back end (hence the name universal). Unlike CJS or AMD, UMD is more like a pattern to configure several module systems. Check here for more patterns. UMD is usually used as a fallback module when using bundler like Rollup/ Webpack

Summary

• ESM is the best module format thanks to its simple syntax, async nature, and tree-shakeability.
• UMD works everywhere and usually used as a fallback in case ESM does not work
• CJS is synchronous and good for back end.
• AMD is asynchronous and good for front end.

Now, I show you where the JS files are.

So you can get their CSS files by replacing .js in the filename end into .css

1. ESM.JS modularity
   • JSDELIVR - https://cdn.jsdelivr.net/npm/@dao-vue/[email protected]/dist/dao-dropdown.esm.js
2. ESM.JS& MINIFIED VERSION
   • coming soon
3. UMD.JS modularity
   • JSDELIVR - https://cdn.jsdelivr.net/npm/@dao-vue/[email protected]/dist/dao-dropdown.umd.js
4. UMD & MINIFIED VERSION
   • coming soon
5. CJS.JS VERSION
   • coming soon
6. CJS.JS modularity with minification
   • JSDELIVER - https://cdn.jsdelivr.net/npm/@dao-vue/[email protected]/dist/dao-dropdown.min.js
7. AMD.JS VERSION
   • coming soon
8. AMD & MINIFIED VERSION
   • coming soon

Have a happy coding :smile:!