docs / Language

Component Namespaces

import * as NS from './card.vsk' and <NS.Card /> — the namespace is a compile-time shorthand, not a value.

A `.vsk` file can be imported as a namespace, and a component tag can then be qualified. The namespace is resolved at compile time to the component's exported name — no module object is ever constructed at runtime.

app/page.vsk
									
										import * as UI from './card.vsk'

component Page() {
  <UI.Card />
}
									
								

That is exactly what the flat form does, and the two are interchangeable:

app/page.vsk
									
										import { Card } from './card.vsk'

component Page() {
  <Card />
}
									
								

What does NOT work

  • A nested path — `<UI.Sub.Card />` raises V0410: a .vsk namespace is flat, there is no nested object to walk into.
  • Reading a non-component as a VALUE — `{UI.max}` raises V0410, because only component tags resolve. Import the value by name, or keep it in a .ts module.

Both rules are specific to .vsk targets. A namespace import from a .ts or .js module is a real module object, so <NS.Icon /> there is an ordinary member expression.