@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

Name	Type	Default	Description
log	unknown	undefined	The variable to log to the screen.
label	string	'Screen Log'	The label to display at the top of the screen.
mode	'light' | 'dark'	'dark'	Set the appearance of the log.
max-length	number	Number.POSITIVE_INFINITY	The maximum length of arrays and object keys to display.
max-depth	number	Number.POSITIVE_INFINITY	The maximum depth of the tree to display.

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.