Studio One is a UI Component Library for Vue 3. The actual state is under development and actually unstable. Studio One
There are two builds available.
dist/studio-one.udm.js
: (UMD) UMD stands for Universal Module Definitiondist/studio-one.es.js
: (ESM) ESM stands for ES Modules
Type definitions are also included. Generally your build tool will be able to figure out which bundle to use, but you can be explicit if you need to.
UMD stands for Universal Module Definition. Here is what it may look like:
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "underscore"], factory)
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"), require("underscore"))
} else {
root.Requester = factory(root.$, root._)
}
}(this, function ($, _) {
// this is where I defined my module implementation
var Requester = { // ... }
return Requester
}))
- 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.
- UMD is usually used as a fallback module when using bundler like Rollup/ Webpack.
ESM stands for ES Modules. It is Javascript's proposal to implement a standard module system. I am sure many of you have seen this:
import React from 'react'
import { App } from 'vue'
- 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.
- Can be called in HTML, just do:
<script type="module">
import {func1} from 'my-lib'
func1()
</script>
This may not work 100% in all browsers yet. For more information refer please to this article.
This template should help get you started developing with Vue 3 and Typescript in Vite.
VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService
in settings!
<script setup>
is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).
Since TypeScript cannot handle type information for .vue
imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue
imports (for example to get props validation when using manual h(...)
calls), you can use the following:
Run Volar: Switch TS Plugin on/off
from VSCode command palette.
- Install and add
@vuedx/typescript-plugin-vue
to the plugins section intsconfig.json
- Delete
src/shims-vue.d.ts
as it is no longer needed to provide module info to Typescript - Open
src/main.ts
in VSCode - Open the VSCode command palette 5. Search and run "Select TypeScript version" -> "Use workspace version"