Getting started

Create a web/app.dart file with our library declaration and imports:

@JS()

library vue_interop; import 'package:js/js.dart'; // TODO: The rest of the code to go here

Declarative rendering

Here’s the first example of a template with the message property placeholder:

<div id="app">

{{ message }}

</div>

Create an annotated factory constructor for Vue :

@JS()

class Vue {

external factory Vue(VueOptions options);

}

The JavaScript API takes an object literal when a new Vue instance is declared. Notice the declaration of the VueOptions type instead of Map ? We cannot use Dart Maps here since they are opaque in JavaScript.

Therefore, we need to create a factory constructor to house our options:

@JS()

@anonymous

class VueOptions {

external factory VueOptions({ String el, VueDataOptions data });

external String get el;

external VueDataOptions get data;

}

And the data prop is a VueDataOptions object:

@JS()

@anonymous

class VueDataOptions {

external factory VueDataOptions({

String message = '', // Set to empty string as default

});

external String get message;

}

Return to web/main.dart and let’s use these factories:

// Relative imports

import './app.dart';



void main() {

Vue(VueOptions(

el: '#app',

data: VueDataOptions(

message: 'Hello Vue!',

),

));

}

You should now see the text “Hello Vue!” on the screen.

Watch the full video for a walkthrough of the other examples.

Conclusion

In Part 2, we will look at handling user input and composition with Vue components.

As always, I hope this was insightful and you learnt something new today.

Subscribe to my YouTube channel for the latest videos on Dart. Thanks!

Like, share and follow me 😍 for more content on Dart.

Further reading