Vue Components

Johan Vergeer
Vue
Back To posts

Components are Vue Instances

Let's start with a simple Vue application. This is the most basic application you could get.

Global components

Global component limitations

  • Global variables cause problems because they can be hard to locate and it is easy to run into naming conflicts
  • Global components use String Templates, which means all html has to be defined in a Javascript string
    • No syntax highligting
    • Lot of escaping the html
  • CSS is not encapsulated, which makes us rely on global CSS styling
  • Global components don't provide any build-time compilation support. This means preprocessing is impossible.

Global components are fine for small applications and prototyping, but for larger applications we should use Single-file comopents.

Simgle-file components

A single-file component is a file with a .vue extension.

It typically includes three secions: template, script and style

Typically single-file components are used in a Vue application.