@michaelpumo/screen

A simple component to log the contents of a variable to the screen.
Think of it as console.log for the UI.

Features

• 💻 Log simple or complex values to the screen, in-place.
• 📋 See the types, lengths and structure of your data.
• 🌤️ Easily set light and dark modes (based on Dracula and Atom One Light themes).
• 👻 Expand and collapse objects and arrays.
• 🏷️ Custom label to make logging easier.
• ✨ Ability to set max-length and max-depth on the arrays and objects you want to display.
• 💥 Highlight outline to nested data, on hover.
• 🤗 Rendered into a semantic HTML <table>.

[!IMPORTANT] This project is under active development and may go through significant changes. Early users greatly appreciated for feedback, advice and suggestions 🙏

Install

npm i @michaelpumo/screen --save-dev

Frameworks

Vue Setup

Vue Demo

Import the stylesheet into your main CSS file.

@import '@michaelpumo/screen/app.css';

Nuxt Setup

Nuxt Demo

Import the stylesheet into your main nuxt.config.{js,ts} file.

export default defineNuxtConfig({
  css: ['@michaelpumo/screen/app.css']
});

You may also find it useful to have Nuxt auto-import the component, so that you can use it freely around your application without manually importing everywhere you need it. You can do this by creating a simple module that imports it for you automatically.

modules/screen.ts

import { addComponent, defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'Screen',
      filePath: '@michaelpumo/screen/vue',
      mode: 'client',
    });
  },
});

Make sure you have auto component import enabled in your nuxt.config.{js,ts} file too:

export default defineNuxtConfig({
  css: ['@michaelpumo/screen/app.css'],
  components: true,
});

Note If you do not want to auto import this component (though it's recommended) then you may need to wrap <Screen /> into a <ClientOnly> tag to avoid warnings with SSR:

<template>
  <ClientOnly>
    <Screen :log="profile" label="My Profile" />
  </ClientOnly>
</template>

React Setup

React Demo

There is no React port yet. Coming soon.

Example Usage (Vue + Nuxt)

<script lang="ts" setup>
import Screen from '@michaelpumo/screen/vue'

const profile = {
  name: 'Michael',
  age: 40,
  children: false,
  about: {
    job: 'Web Developer',
    hobbies: ['hiking', 'cooking', 'guitar'],
    tagline: `I'm a freelance user interface developer.`
  }
}
</script>

<template>
  <Screen :log="profile" label="My Profile" />
</template>

Props

Motivation

I simply wanted something that functioned slightly better than a basic <pre> tag for logging to the screen. 🤷🏻‍♂️ Feel free to share your thoughts on how this concept can be improved.

Requirements

• Vue 3+

Future

• Make ports for React and Svelte etc.