How to use Vue.js Filters in NuxtJS

Author: zemna
Date: April 17, 2021
Share this:

I'll demonstrate configuration to use my 'formatDate' Vue.js filter in my NuxtJS project.

[Optional] install Day.js package from npm

Because I'll use Day.js to format date, I need to install package first.

npm install dayjs --save

Create filters.js file to /plugins folder

All of my Vue.js filters are managed by filters.js file.

Add your filters in this file.

import Vue from 'vue'
import _ from 'lodash'
import dayjs from 'dayjs'

Vue.filter('formatDate', (value, format) => {
  return dayjs(value).format(format)

Vue.filter('startCase', (str) => {
  if (!str) return ''
  str = _.startCase(str.toString())
  return str

Register filters.js file to nuxt.config.js file

export default {
  // Plugins to run before rendering page:
  plugins: [

Use registered filters in your vue file

<div>{{ article.createdAt | formatDate('DD MMM, YYYY') }}</div>
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram