Updating the display text length on vue-moment

Currently, I am attempting to showcase an array of numbers

const days = [1, 7, 14, 30, 60]

in a more human-readable format using vue-moment

Everything is functioning correctly

{{ days | duration('humanize') }}
// 'a day'
// '7 days'
// '14 days'
// 'a month'
// '2 months'

Dilemma

I would like to have 1 month instead of a month

Is there a way to achieve this?

I came across this solution, which involves adjusting the vue-moment configuration.

The documentation at https://www.npmjs.com/package/vue-moment mentions that

vue-moment should adhere to any global Moment customizations, including i18n locales. For further information, refer to http://momentjs.com/docs/#/customization/.

You can also provide a customized Moment object with the plugin options. This method is particularly beneficial for addressing the browserify locale issue demonstrated in the documentation http://momentjs.com/docs/#/use-it/browserify/

However, both approaches require me to install moment AND vue-moment merely to create a moment-config-object to pass into vue-moment. Am I overlooking something here?

I'm seeking a way to input {M: '1 month'} somewhere and call it a day. Is that achievable?

(loading vue-moment with Vue.use(require('vue-moment')))

Answer №1

If you install vue-moment, it will automatically include moment.js as a dependency in your project. This means that when you check your node_modules folder after installing vue-moment, you will find the moment library already present, so no new dependency is being added.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing the Placement of Dynamic Google Maps

After setting up a responsive Google map using this jsFiddle and guidance from this stack overflow post, I encountered an issue. How can I keep the map centered on the marker across various viewports and browser sizes? I came across a solution in this res ...

Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified). <div class="divDash"> <span>XX</span> </div> The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div. .div ...

Exploring the use of the Next.js page router for implementing internationalization (i18

I need assistance implementing Dutch and English language translations for my entire website. Can anyone provide guidance? I have tried using i18n localizely, but it only works for individual pages. I am looking to implement translations on a larger scale ...

Storing formatted user input in an array with VueJS: A step-by-step guide

Looking for assistance that relates to the following question Vue.js: Input formatting using computed property is not applying when typing quick I am facing a challenge in extracting formatted values from text inputs and storing them in an array. I intend ...

AngularJS does not allow empty spaces in textarea inputs

I am working on a form that includes a textarea element for users to input descriptions, however it does not allow any empty spaces. Users can only input alphanumeric and numeric characters, but no spaces. <textarea class="form-control" rows="4" maxl ...

Ways to avoid unintentional removal of contenteditable unordered lists in Internet Explorer 10

How can I create a contenteditable ul element on a webpage while avoiding the issue in Internet Explorer 10 where selecting all and deleting removes the ul element from the page? Is there a way to prevent this or detect when it happens in order to insert ...

Generating personalized MongoDB collections for individual users - A step-by-step guide

My query is more about the procedure rather than a specific coding issue. I am working on a node application and using DHTMLX calendar. What I aim for is to have each user with their own set of events on their individual calendar. Currently, the implement ...

Printing the result of an SQL query in Node.js without using braces

As a beginner in node.js with only a basic understanding of javascript, I apologize if I make any mistakes. I attempted to display the results retrieved by an SQL query in node.js using: <p>Users are " + util.inspect(results) + ".</p>" an ...

Automatically use JavaScript to send an email to my email address

I have a question I'm trying to solve: Is there a way to send myself an email notification (using a different address) when a specific event occurs in Javascript or Node.js? For example: if (100 > 90) { emailto="xxxxx.gmail.com" subject="It happ ...

Employing selenium.isElementPresent in Selenium 1 does not have the capability to identify an element that is dynamically added to the Document Object Model (

After trying out various locators, I have yet to find one that can detect an element that was added to the DOM. Below is my latest attempt at solving this issue: selenium.fireEvent("//button[2]", "click"); waitUntil(new Condition() { @Override pu ...

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

Utilize mouseover to rotate the camera in three.js

Is it possible to utilize Three.js to rotate a camera and view an object from all angles upon hovering with the mouse? ...

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

Make sure to bind by clicking on a list item in a similar way to using

I currently have a dropdown component that allows users to select a language for localization. <template> <div class="localeDropdown"> <dropdown v-model="selectedLocale" :items="locales" :togg ...

What are the steps for loading JSON data into a select dropdown with the help of AJAX?

I am trying to create a dropdown list of schools using the select tag. Currently, I have hard coded values for the list, but I want to fetch the data from a RESTful service instead. Can someone please provide guidance on how to achieve this? <html& ...

Transform the appearance of several elements using querySelectorAll

When targeting class names in an HTML page with a checkbox using querySelectorAll, keep in mind that getElementByID only works with the first element. QuerySelectorAll displays a nodeList which might require some corrections - how can this be achieved? le ...

Changing the global variable state within components in Vue 3: A step-by-step guide

I have recently started working with Vue3 and web development in general. My current setup involves using Vue3 with Express. I'm considering using a global property like app.config.globalProperties.$isAuthenticated and toggling it between true and fa ...

The compiler option 'esnext.array' does not provide support for utilizing the Array.prototype.flat() method

I'm facing an issue with getting my Angular 2 app to compile while using experimental JavaScript array features like the flat() method. To enable these features, I added the esnext.array option in the tsconfig.json file, so the lib section now includ ...

Having difficulty duplicating a button with a click event using jQuery

I have implemented a button that reveals a phone number when clicked using the code below: var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12); var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGOR ...

What is the best way to activate a click event within an ng-repeat loop in AngularJS

Is there a way to trigger an event click handler in angular where clicking the button will also trigger the span element? I've tried using the nth-child selector without success. Any suggestions on how to achieve this? I also attempted to use jQuery s ...