vue-error-page

    1.1.7 • Public • Published

    vue-error-page

    Latest Version on NPM Software License PRs Welcome donate chat

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


    Why?

    Because:


    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.

    Install

    npm i vue-error-page

    DownloadsWeekly Downloads

    220

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    9.79 kB

    Total Files

    7

    Last publish

    Collaborators

    • raniesantos