vue-error-page

Provides a wrapper for router-view that allows you to show error pages without changing the URL.

Why?

Because:

• Trigger router-view change without changing current URL
• How to load 404 component conditionally
• Handling 404's with router
• 404 after xmlhttprequest
• 404 in SPA

Install

You can install this package via yarn (or npm):

$ yarn add vue-error-page

Usage

Setup

This package depends on a global event bus in order to emit events that will show the error page. You must first define an event bus on the window object. By default it looks for the eventBus key but you can configure this to use a different key.

import Vue from 'vue';
import ErrorPage from 'vue-error-page';

window.eventBus = new Vue();

Vue.use(ErrorPage);

Options

Vue.use(ErrorPage, {
    tagName: 'app-view',
    bus: 'eventBus',
    event: 'error-page',
    resolver: (component) => {
        return require('./views/Errors/' + component).default;
    }
});

Option | Default Value | Description :----------: | :------------: | ----------- tagName | 'app-view' | The name of the component that wraps router-view. bus | 'eventBus' | The name of the event bus. (Must be defined on window.) event | 'error-page' | The name of the event being emitted and listened to. resolver | (component) => { return component; } | This is essentially just a shortcut for importing the component. This will not work with SSR.

The wrapper component

Then you can swap router-view with app-view (or whatever you defined for tagName).

<template>
    <div>
        <header></header>
        <nav></nav>
        <app-view></app-view>
        <footer></footer>
    </div>
</template>

Triggering the error page

Finally, you can use the $_error() method injected into all components. You can call it to display a specific error page.

Example route

{
    path: '/profile/:username',
    component: require('./views/Profile').default
}

views/Errors/NotFound.vue

<template>
    <div>
        <h1>404 Error</h1>
        <p>The resource could not be found.</p>
        <router-link to="/" exact>
            Go to home page
        </router-link>
    </div>
</template>

views/Profile.vue

import NotFound from './views/Errors/NotFound';

axios.get('/profile/' + this.$route.params.username)
    .then((response) => {
        // user was found
    })
    .catch((error) => {
        if (error.response.status === 404) {
            this.$_error(NotFound);
        }
    });

If you decided to define a resolver, you can directly specify the filename of the component like this this.$_error('NotFound').

Additionally, if you name your error components after status codes like this 404.vue, you can trigger error pages like this this.$_error(404).

Passing additional data to the error page

You can pass a payload as an additional argument to $_error().

this.$_error(404, {
    username: this.$route.params.username
});

The payload will be available as a prop in the component.

<template>
    <div>
        <h1>404 Error</h1>
        <p>User {{ payload.username }} not found.</p>
        <router-link to="/" exact>
            Go to home page
        </router-link>
    </div>
</template>

<script>
export default {
    props: ['payload']
};
</script>

Contributing

Please see CONTRIBUTING for details.

License

Released under the MIT License.