DEV Community

Marco Poletto
Marco Poletto

Posted on

2 1

How to create simple tabs system with VueJS

Today I want to share with you and easy way to build a simple tab system using VueJS.

As a starter I am using Vue/cli 3

Instructions

    for installing vue-cli:

npm i -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

    for creating a new project:

vue create <project-name>
Enter fullscreen mode Exit fullscreen mode

    for running the project:

cd <project-name>
npm run serve
Enter fullscreen mode Exit fullscreen mode

YouTube

Get the code

    GitHub

GitHub logo polettoweb / vue-tabs

Simple example of tabs created with VueJS

vue-tabs

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

    CodeSandbox

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

DEV works best when you're signed in—unlocking a more customized experience with features like dark mode and personalized reading settings!

Okay