In a similar way to React giving us the special .jsx/.tsx extensions to allow us to put our code and web page together, Vue provides us with single-file components that are created as .vue files. These files allow us to mix our code and web templates together to build up our page. Let's open up our Home.vue page and analyze it before we go on to create our first TensorFlow component.

We can see that our .vue component is broken up into two separate parts. There's a template section that defines the layout of the HTML that will be displayed on the screen, and there's a separate script section where we include our code. Since we are using TypeScript, the language for our script section is ts.

The script section starts off by defining the import section in much the same way that we would see in a standard .ts file. Where we see @ in the import, this tells us that the import path is relative to the src directory, so the HelloWorld.vue component is located in the src/components folder:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
</script>

The next thing we need to do is create a class that extends from the Vue class. What we are doing with this is using @Component to create a component registration called Home that can be used elsewhere:

@Component
export default class Home extends Vue {}

There is something else that we need to do. Our template is going to reference an external HelloWorld component. We must decorate our class with the components that the template is going to use, like this:

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}

The template is very straightforward. It consists of a single div class that we are going to render the HelloWorld component into:

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

From the previous code template, we can see that, unlike React, Vue does not give us an explicit render function to deal with rendering HTML and state. Instead, the build-up of rendering is a lot closer to the Angular model, in which a template is parsed into content that can be served up.

Vue borrows concepts from React such as the use of the Virtual DOM (as we discussed when we introduced React). Vue also uses a virtual DOM but implements it in a slightly different fashion, primarily with Vue only re-rendering out components that have a change, where React, by default, would also re-render child components.

What we want to do now is modify the HelloWorld component so that we can work with TensorFlow. But, before we do that, we need to write a couple of supporting classes that will do the heavy lifting with TensorFlow. These aren't big classes in terms of code, but they are extremely important. Our ImageClassifier class starts off with a standard class definition, as follows:

export class ImageClassifier {
}

The next step is optional, but it has a major impact on the stability of our application if it is running on a Windows client. Underneath the cover, TensorFlow uses WebGLTextures, but there is a problem with creating WebGLTextures on Windows platforms. To get around this issue, our constructor needs to be modified to look like this:

constructor() {
  tf.ENV.set('WEBGL_PACK', false);
}

Since we can run the image classification any number of times, we are going to add a private variable that represents the standard MobileNet TensorFlow:

private model: MobileNet | null = null;