Integrating with Other Frameworks Chapter 19Then, enter the newly create vue_app directory and take a look at the index.html in the
dist folder. This is the file that will be the entry point to our server, open it with an editor.
You can clear everything and leave only an empty HTML5 boilerplate with an empty
and . In the head section, we need to declare dependencies on Vue,
Horizon, and Clarifai, as illustrated:
<script src="https://unpkg.com/vue"></script>
<script src="/horizon/horizon.js"></script>
<script src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>Just note how Horizon doesn't come from a CDN but from a local dependency.
We start by laying out a template for our journal. We have two parts. In the first, we will
list what we did in the past. Write the following in the body of the HTML:
<div id="app">
<div>
<h3>Dear diary...</h3>
<ul>
<li v-for="entry in entries">
{{ entry.datetime.toLocaleDateString() }}:
{{ entry.text }}
</li>
</ul>
</div>
...In the second part, we will enter new entries:
...
<h3>New Entry</h3>
<img
style="max-width:200px;max-height:200px"
:src="data_uri"
/>
<input type="file" @change="selectFile" ref="file">
<p v-if="tentativeEntries.length">Choose an entry</p>
<button v-for="tentativeEntry in tentativeEntries"
@click="send(tentativeEntry)">
{{tentativeEntry}}
</button>
</div>After this, open a