DRY Components

DRY (Don't Repeat Yourself) Components is a collection of bare minimum utility components for Vue.js applications.

Installation

Install the DRY components package via npm:

npm install @s32n/dry

Usage

Import and use DRY components in your Vue.js application:

import { defineComponent } from 'vue'
import { Dev, Prod, Inspect } from '@s32n/dry'

export default defineComponent({
  components: {
    Dev,
    Prod,
    Inspect
  },
  // ... rest of your component
})

Components

Dev

Environment based rendering

Basic Usage:

<template>
  <dev>
    Show only in dev mode
  </dev>
</template>

<script setup>
import { Dev } from '@s32n/dry'
</script>

Prod

Environment based rendering

Basic Usage:

<template>
  <prod>
    Show only in production mode
  </prod>
</template>

<script setup>
import { Prod } from '@s32n/dry'
</script>

Inspect

Inspect data and alike

Basic Usage:

<template>
  <inspect :data="anyData"/>
</template>

<script setup>
import { Inspect } from '@s32n/dry'
const anyData = {
  many: "properties",
  toBe: "inspected"
}
</script>