In Part 11 of this series, we set up a new Vue application using the Vite build system. Now, let’s take a tour of this application so we can understand how we’ll customize it and integrate our existing FlashWord functionality.
In these notes I will refer to the existing version of FlashWord we have built (pre-Vite) as v1. The new version of FlashWord that we just set up with Vite and are actively working on will be referred to as v2.
If needed for reference, the existing v1 code can be found here: github.com/susanBuck/vue-simplified/flashword.
Structure of our new Vite-based Vue App
Let’s get to know the structure of our new Vite-based app. It all starts with index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Here we see a div with the id app that we will mount our Vue instance to (similarly to how we did in v1):
<div id="app"></div>
Following that we import our main JavaScript file, src/main.js:
<script type="module" src="/src/main.js"></script>
And within src/main.js we see this setup code:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Note how this code (like our code in app.js in v1 FlashWord) invokes Vue’s createApp method and mounts it to the div with the id app. Here’s where it’s different though:
In v1 FlashWord we access createApp via the global Vue object which was made available by importing Vue from the CDN:
// createApp in v1
const app = Vue.createApp(FlashWord).mount('#app')
In v2 FlashWord we’re using JavaScript modules and explicitly importing the createApp method from the Vue library (found in the node_modules directory managed by NPM via the package.json file):
// createApp in v2
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
With Vite, the setup of our application relies heavily on JavaScript modules; if you need a refresher on modules I recommend this guide: JavaScript.info Modules.
App.vue Single File Component
Another difference is that in v1, all the options of our application (e.g. data properties, methods, computed properties, watchers, etc.) were defined in our main JavaScript file (app.js). Here in v2, though, all that work is outsourced to App.vue which is our first example of a Vue Single File Component (SFC).
We’ll cover SFCs in full detail in the next part of this series, but for now all we need to know is that SFCs provide a way for us to organize one specific entity of our application into a single file that contains all the JavaScript, HTML, and CSS necessary for that entity.
In this example, the “entity” we’re dealing with is the application itself, which is why the file name is App.vue (SFCs end with a .vue extension). You can think of App.vue as a parent component that down the road will import and setup other subcomponents.
Taking a closer look at App.vue, we can see it’s broken down into these three parts:
<script setup>
// ...This is where all the JavaScript goes...
</script>
<template>
<!-- This is where all the HTML goes... -->
</template>
<style>
/* This is where all the CSS goes... */
</style>
Following this structure, we can start to build our FlashWord functionality by completing the following steps:
Step 1 - JavaScript
Replace the existing content of <script setup></script> element with an export default the exports the options we defined in v1 app.js.
Additionally, amend <script setup> to just be <script>. The setup attribute is something needed when working with Vue’s Composition API which is something we’ll explore later in this series.
Step 2 - HTML
Copy in the contents of v1 div#app into the <template><template> element.
Step 3 - CSS
Copy in the contents of v1 styles.css into the <style></style> element.
If needed for reference, this is what App.vue should look like after completing the above steps.
Test it
After completing the above steps, preview your work in the browser and you should see a functioning version of FlashWord running on your Vite dev server.
You can also see the hot reloading feature in action again by making changes to the code and seeing those changes instantly reflected in the browser.
What’s next...
In the next part of this series we’ll dig deeper into Single File Components to see how they’ll help us optimize the organization of our Vue apps as they grow in complexity.