How to Create Your First App with Vue.js

If you’ve never created a Vue.js application before, this guide will walk you through the process of creating one and help you understand how it works. We’ll be building a Vue CLI default application as our example.

First Example

Let’s start with the most basic example of using Vue. You can create an HTML file like this:

<html>
 <body>
   <div id="example">
     <p>{{ hello }}</p>
   </div>
   <script src="https://unpkg.com/vue"></script>
   <script>
     new Vue({
       el: '#example',
       data: { hello: 'Hello World!' }
     })
   </script>
 </body>
</html>

Simply open this file in your browser, and you’ll have your first Vue app! The page should display a “Hello World!” message.

The script tags are placed at the end of the body to ensure they are executed in the correct order after the DOM is loaded. In this code, we create a new Vue app and link it to the #example element as its template. We then associate that template with a data object which contains the dynamic content to be rendered by Vue.

You can see this example on Codepen: link

Second Example: the Vue CLI Default App

Now let’s take things up a notch and look at the Vue CLI default application. This app is already pre-built and ready for you to explore.

Use the Vue CLI Locally

To get started with the Vue CLI locally, install it on your computer and run the following command:

1	vue create <enter the app name>

Use CodeSandbox

If you prefer not to install anything, you can use CodeSandbox to access the Vue CLI default application. Simply visit this link to get started.

CodeSandbox is a convenient code editor that allows you to build apps in the cloud. It provides access to npm packages and integrates easily with platforms like Zeit Now and GitHub.

Whether you choose to use the Vue CLI locally or through CodeSandbox, let’s take a closer look at the Vue app’s file structure.

The Files Structure

In addition to the package.json file, which contains the configuration, the initial project structure includes the following files:

index.html
src/App.vue
src/main.js
src/assets/logo.png
src/components/HelloWorld.vue

`index.html`

The index.html file serves as the main app file. It includes a simple element <div id="app"></div>, which the Vue application will use to attach itself to the DOM.

`src/main.js`

This is the main JavaScript file that powers our app. It imports the Vue library and the App component from App.vue. We also set productionTip to false to prevent Vue from outputting a development mode tip in the console. Then, we create a new Vue instance and assign it to the DOM element identified by #app in index.html. Finally, we tell Vue to use the App component.

`src/App.vue`

App.vue is a Single File Component that contains three sections: HTML, CSS, and JavaScript. Single File Components are a great way to encapsulate all the necessary code for a component in a single file.

In the <template> section, we define the HTML markup for the component. In the <script> section, we import the HelloWorld component and set up the component for use within the App component. The <style> section contains styling specific to the App component, in this case, CSS that will be applied to the entire page.

`src/components/HelloWorld.vue`

This file contains the HelloWorld component, which is included by the App component. The component outputs a set of links along with a message. The component’s CSS is scoped, meaning it only applies to elements within the HelloWorld component and won’t affect other parts of the page.

To run the app and make changes, you can take advantage of CodeSandbox’s preview functionality. This allows you to edit the source code and see the changes reflected in real-time.

That’s it! You’ve created your first app with Vue.js. Feel free to explore the provided examples and experiment with creating your own Vue.js applications.

Tags: Vue.js, Vue CLI, frontend development