about uscontact

How to use Vue.js Filters in NuxtJS

Category:
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: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "~plugins/filters.js"
  ],
}

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.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu