How to Create a Simple App with Vue 3: A Step-by-Step Guide
Vue.js has become one of the most popular JavaScript frameworks for building user interfaces. With the release of Vue 3, it’s even more powerful and easy to use. In this tutorial, we’ll walk you through creating a simple Vue 3 app from scratch. By the end, you’ll have a basic understanding of Vue’s core concepts and a working app that you can expand on.
Setting Up Your Development Environment
Before we start building our Vue 3 app, we need to set up our development environment. This involves installing Node.js and npm (Node Package Manager), which are essential for working with Vue.js.
Step 1: Install Node.js and npm
If you haven’t already installed Node.js, head over to the official Node.js website and download the latest version for your operating system. The npm package manager comes bundled with Node.js, so you’ll get it automatically.
To verify the installation, open your terminal and run:
This should display the versions of Node.js and npm that are installed.
Step 2: Install Vue CLI
Vue CLI is a command-line interface that makes it easy to create and manage Vue.js projects. To install it globally on your machine, use npm:
Step 3: Create a New Vue 3 Project
With Vue CLI installed, you can now create a new Vue 3 project. Open your terminal and run the following command:
You’ll be prompted to choose a preset. For simplicity, select the default preset by pressing Enter. Vue CLI will set up a new project in a directory named my-vue-app.
Step 4: Start the Development Server
Navigate to your project directory:
Now, start the development server:
Vue CLI will start a local server, and you can view your app by opening http://localhost:8080 in your browser. You should see a welcome screen indicating that your Vue 3 app is up and running!
Building Your First Vue Component
Now that our project is set up, let’s create a simple Vue component and render it on the page.
Step 1: Edit App.vue
The App.vue file is the root component of your application. Open the src/App.vue file in your code editor and replace its contents with the following:
<div id=“app“>
<h1>{{ message }}</h1>
<MyComponent />
</div>
</template>
<script>
import MyComponent from ‚./components/MyComponent.vue‘;
export default {
name: ‚App‘,
components: {
MyComponent
},
data() {
return {
message: ‚Hello Vue 3!‘
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here, we’ve added a data property called message and displayed it within an <h1> tag. We also imported a new component named MyComponent, which we’ll create next.
Step 2: Create a New Component
Let’s create a new component named MyComponent.vue inside the src/components/ directory. Create a file with the following content:
<div>
<p>This is a simple component!</p>
</div>
</template>
<script>
export default {
name: ‚MyComponent‘
};
</script>
<style scoped>
p {
color: #42b983;
}
</style>
This component displays a simple paragraph with some custom styling. The scoped attribute ensures that the styles only apply to this component.
Step 3: View Your App
Save your changes and go back to your browser. If your development server is still running, you should see the updated app with your message and the new component. If the server isn’t running, start it again with npm run serve.
Expanding Your App
Now that you’ve created a simple Vue 3 app, you can expand it by adding more components, setting up routing with Vue Router, and managing state with Vuex. The possibilities are endless!
Building for Production
Once you’re happy with your app and ready to deploy it, you can build it for production by running:
This will create a dist directory with optimized files that you can deploy to a web server.
Conclusion
Congratulations! You’ve just created a simple Vue 3 app and learned the basics of working with Vue components. This is just the beginning—Vue.js offers a rich ecosystem with tools and libraries to build more complex applications. As you grow more comfortable with Vue, you can explore advanced features like the Composition API, Vue Router, and Vuex.
Happy coding!
