Vue examples

Resize this window in different resolutions

This demo is working with Vue in Hybrid mode, so you can use both data-adaptive and data-teleport attributes with Vue elements or static elements (outside of Vue). It offers a Vue component called "TeleportTo" that will teleport any element to any other element when visible.

Look at all the examples in the "test/index.html" and "example/app.js" and "example/hello.vue", and/or use the code inspector to see the DOM changes

Static ID "hello" Element using json compliant object to add classes at "desktop" and "tablet" sizes

static element using non compliant json object to add classes at "desktop" and "tablet" sizes

static element (Id= world)

Adding Inline styling per device at "desktop" and "tablet" sizes

String like directives

Direct teleport after "world" on load. Unline using "data-adaptive" this will only teleport once, not responsive

Direct teleport before "world" OnLoad.
Unlike using "data-adaptive", this will only teleport once,
not responsive (see the source of this page)

Custom CSS query Expressions via string like Directive

Static element that will teleport at "tablet" size to a Vue driven element when visible or existing in the DOM

Custom CSS query Expressions via string like Directive. This will add a class at a custom breakpoint. This element has an ID of "customQueries"

Static element that will teleport at "tablet" size to a Vue driven element when visible

Static element that will teleport at "desktop or mobile" right above "static hello"

Static element that will teleport right "after" "customQueries" with data attribute in hybrid mode

Static element that will teleport "hello" with data attribute using an array like string