@staszek998/vue-throw-error
v1.0.1
Published
A simple Vue component which throws an error when it gets mounted and also prints some useful info on the screen, where the component was originally placed (within the DOM).
Downloads
17
Maintainers
Readme
vue-throw-error
A simple Vue component which throws an error when it gets mounted and also prints some useful info on the screen, where the component was originally placed (within the DOM).
Table of contents
[[TOC]]
Why bother?
Often, when designing reusable components, we put slots in them, that should be populated by the
parent component. If we don't provide the content for a given required slot, our component
will be broken. In such cases, the following <ThrowError>
component may turn out to be useful, and
will throw an exception if it gets rendered (for more explanation, see the "Usage" section below).
Installation
1. Download the package
1.A. Using NPM.
npm install --save @staszek998/vue-throw-error
1.B. Using Yarn.
yarn add @staszek998/vue-throw-error
2. Implement the component within your Vue application
vue-throw-error exposes two named exports: Component
and Plugin
. Here's how to use them:
2.A. Using the Component
export
2.A.a. Installing the component globally, for use within the whole app
// main.(j|t)s
import { createApp } from 'vue'
import { Component as ThrowError } from 'vue-throw-error'
const app = createApp({})
app.component('ThrowError', ThrowError)
2.A.b. Installing the component locally, for use within a single component
<!-- MyComponent.vue -->
<script>
import { Component as ThrowError } from 'vue-throw-error'
export default {
components: { ThrowError }
}
</script>
2.B. Using the Plugin
export
// main.(j|t)s
import { createApp } from 'vue'
import { Plugin as ThrowError } from 'vue-throw-error'
const app = createApp({})
app.use(ThrowError)
Usage
Default
You can utilize the <ThrowError>
component without any further configuration:
<!-- MyComponent.vue -->
<template>
<div>
<slot>
<!--
This slot is required and HAS TO be populated for the component to work correctly.
If you don't fill this slot, an error will be thrown.
-->
<ThrowError />
</slot>
</div>
</template>
<!-- App.vue -->
<template>
<MyComponent />
</template>
<script>
import MyComponent from 'MyComponent.vue'
export default {
components: { MyComponent }
}
</script>
This will produce the following output:
- browser:
- console:
Customized
However, you can customize the error message:
<!-- MyComponent.vue -->
<template>
<div>
<slot>
<!--
This slot is required and HAS TO be populated for the component to work correctly.
If you don't fill this slot, an error will be thrown.
-->
<ThrowError>Maecenas faucibus mollis interdum.</ThrowError>
</slot>
</div>
</template>
<!-- App.vue -->
<template>
<MyComponent />
</template>
<script>
import MyComponent from 'MyComponent.vue'
export default {
components: { MyComponent }
}
</script>
This will produce the following output:
- browser:
- console:
Styling
In order to receive the base styles for the <ThrowError>
component, you should import the exported
CSS file, using one of the following options:
A. Inside your main stylesheet (recommended)
// main.scss
@import 'vue-throw-error/dist/style.css';
B. Inside your root component
B.a. inside the <style>
section
<!-- App.vue -->
<style lang="scss">
@import 'vue-throw-error/dist/style.css';
</style>
B.b. inside the <script>
section
<!-- App.vue -->
<script>
import 'vue-throw-error/dist/style.css';
</script>
C. Inside your main entry file
// main.(j|t)s
import 'vue-throw-error/dist/style.css';
Style overrides
The styling of the <ThrowError>
component is limited to the absolute minimum.
Both font-family
and font-size
should be automatically adjusted to the ones being used within
your application.
Authors
Copyright © 2022 IDEALIGN Stanisław Gregor
Licensed under the MIT license.