A quick Vue (Nuxt) component example.

A short introduction to create a reusable alert component.

Prequisites and setup

This is not a formal setup guide, but just the way i have it set up so it can be replicated. It is expected to have a Nuxt application running, if you want to know how to easily do that Nuxt installation.

• Nuxt 2.14*
• Node 14 (but Node > 10 should suffice)

The component

components/general/alert.vue (file name for the component)

<template>
  <div class="alert" :class="type">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'alert',
  props: ['message', 'type']
}
</script>

It is a single div component, which contains a message that is passed down as a props value. It also has a type props that is being used to set a class. the shorthand :class is being used (which does the same as v-bind:class).

Using the component

To use this component with dynamic values, you need to import it in a different component. Register it in the components object and then it is usable as a custom HTML element.

pages/index.vue (file name for the page file)

<template>
  <div class="page">
    <h1>Page title</h1>

    <alert :message="'Error Error!'" :type="'error'" />
  </div>
</template>

<script>
import Alert from '@/path/to/alert';

export default {
  name: 'basic-page',
  components: { Alert }
}

In this example, we import Alert from '@/path/to/alert'; then we register it in components: { Alert }. Finally we use it as a custom HTML element. We use :message= to pass a String value.

(notice that we are using single quotes within the double quotes to specifically pass a String, if you want to pass down an object or a variable, do it like: :message="customMessage").

Finally in the same way we are passing the String error. which is then added as a class to the element.

The final HTML output will then be something like:

<div class="alert error">
  Error Error!
</div>

By adding methods, computed values and fancier styling you can create components that are very flexible, small and are usable wherever you want in your application.