Edit

Tutorial: Vue.js for Beginners

  • Article

If you're brand new to using Vue.js, this guide will help you to get started with some basics.

Prerequisites

Try NodeJS with Visual Studio Code

If you don't already have it, install VS Code. We recommend installing VS Code on Windows, regardless of whether you plan to use Vue on Windows or WSL.

  1. Open your command line and create a new directory: mkdir HelloVue, then enter the directory: cd HelloVue

  2. Install the Vue CLI: npm install -g @vue/cli

  3. Create your Vue app: vue create hello-vue-app

    You'll need to choose whether to use Vue 2 or Vue 3 Preview, or manually select the features you want.

    Vue CLI preset

  4. Open the directory of your new hello-vue-app: cd hello-vue-app

  5. Try running you new Vue app in your web browser: npm run serve

    You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser. You can press Ctrl+C to stop the vue-cli-service server.

    Note

    If using WSL (with Ubuntu or your favorite Linux distribution) for this tutorial, you'll need to make sure that you have the Remote - WSL Extension installed for the best experience running and editing your code with VS remote server.

  6. Try updating the welcome message by opening your Vue app's source code in VS Code, enter: code .

  7. VS Code will launch and display your Vue application in the File Explorer. Run your app in the terminal again with npm run serve and have your web browser open to the localhost so that you can see the Vue page welcome page displayed. Find the App.vue file in VS Code. Try changing "Welcome to your Vue.js App" to "Welcome to the Jungle!". You will see your Vue app "hot reload" as soon as you save your change.

    Vue app hot reload on change animated gif

Additional resources