VueGL Files

What’s Changed

v1 has drastically different syntax and structure since v0.x.

Passing an instance to other components

When a VueGL component needs another component as its dependent data, the component to be registered needed the name prop to be defined and namespace component handled it in v0.x.

In v1, components does not need names but they will be defined in a named slot of another component.

v0.x

<vgl-namespace>
  <vgl-geometry name="g" />
  <vgl-material name="m" />
  <vgl-mesh geometry="g" material="m" />
</vgl-namespace>

v1

<vgl-mesh>
  <template #geometry>
    <vgl-geometry />
  </template>
  <template #material>
    <vgl-material />
  </template>
</vgl-mesh>

Avoiding complex props

In v0.x, some props received a formatted string and VueGL parsed them.

v0.x

<vgl-mesh position="1.2 3.4 5.6" />

In v1, props accept primitive values as possible and their definitions are simplified .

v1

<vgl-mesh :position-x="1.2" :position-y="3.4" :position-z="5.6" />

Re-usable instance definition

Using named slots prevents re-using same instance.

Now we have <vgl-defs> and <vgl-use> components instead <vgl-namespace> for that purpose. They work like SVG's <defs> and <use>.

v0.x

<vgl-namespace>
  <vgl-geometry name="g" />
  <vgl-mesh geometry="g" />
  <vgl-line geometry="g" />
</vgl-namespace>

v1

<vgl-defs>
  <template #g>
    <vgl-geometry />
  </template>
</vgl-defs>
<vgl-mesh>
  <template #geometry>
    <vgl-use href="g" />
  <template>
<vgl-mesh>
<vgl-line>
  <template #geometry>
    <vgl-use href="g" />
  </template>
</vgl-line>

The new renderer component renders a pure canvas

In v0.x, <vgl-renderer> creates a wrapper