UVue

# Helpers

# Redirect

A simple function to redirect to a specific page that works on client and server side:

export default {
  async asyncData({ redirect }) {
    redirect({ path: '' }, 302);
  },

  methods: {
    onClick() {
      this.$redirect({ path: '/some-path' });
    },
  },
};

TIP

# Throw an error

WARNING

This needs @uvue/core/plugins/errorHandler plugin installed on your project

A simple function to throw an error

export default {
  async asyncData({ error }) {
    error(new Error(`I'm a teapot`), 418);
  },

  methods: {
    triggerError() {
      this.$error(new Error(`I'm a teapot`), 418);
    },
  },
};

TIP

  • First argument is an object or a string
  • Second argument is the HTTP status code (500 by default)

# Vue Class Components

To use Vue Class components in your application you need to include @uvue/core/vueclass in your src/main.ts file:

import '@uvue/core/vueclass';

With that, Vue router and UVue plugins hooks will be correctly registered:

import Component from 'vue-class-component';

@Component
export default class PageComponent extends Vue {
  middlewares = [
    // ...
  ];

  async asyncData() {
    // ...
  }

  async fetch() {
    // ...
  }
}

This file will import some important types definition too.

# Vue meta

If you use vue-meta package you can register its hook too:

import Vue from 'vue';
import VueMeta from 'vue-meta';
import Component from 'vue-class-component';

Vue.use(VueMeta, {
  keyName: 'head',
});

Component.registerHooks(['head']);

And then use it in your page components:

import Component from 'vue-class-component';

@Component
export default class PageComponent extends Vue {
  head() {
    return {
      title: 'Hello world!',
    };
  }
}

You will have to setup types definitions too, in src/vue-shims.d.ts:

import { MetaInfo } from 'vue-meta';

/**
 * Vue meta
 */
declare module 'vue/types/vue' {
  interface Vue {
    metaInfo?: MetaInfo | (() => MetaInfo);
  }
}

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    metaInfo?: MetaInfo | (() => MetaInfo);
  }
}

← Configuration →