use the Klee tool, Vue. Now I already have this installed in my local environment, but if you don't, check the source link to the GitHub repo below this episode, and I'll include instructions for it in the README. Ok, so I'll go to my main code directory, and create a new Vue application with vue create, and we'll give it a name of offline-first-notes. So it's going to go through a couple of steps here, and I'm going to manually select some features. I want to choose my Vue version, I'm not going to use Babel for this series, and we did talk about PWA support, but I'm not going to include it right away.

And now we just wait for the installation to finish up. Okay so now we can follow these directions. Let's cd inside of our project folder, and run npm run serve. Okay so we have a development server set up, localhost:8080. And if we navigate to that in the browser, we have our Vue application ready to go. Before we continue though, let's clean up what we have here and get rid of this default markup. Going back to the terminal, I'm going to open up a new tab here. And open up our source code. Alright now let's open up our main component under Source/App.

And open up our source code. Alright now let's open up our main component under src/App. Now this is calling a child HelloWorld component, but for now we're going to wrap everything in this main App.vue component. So we can get rid of that markup, get rid of the import statement, the components block here, and we can get rid of that component under the components folder. Now because we are running that development server using npm run serve, any changes that we make to any of our assets will be automatically recompiled and injected into our browser. So saving this file and going to our browser, we see that it's now blank. Which is good, it's what we wanted.

This is just a simple explanation with no code.