What could be the reason for the incorrect formatting of my Vue.js dependency maz-ui maz-phone-number-input?

I have integrated a country code dropdown into the phone number input field on my sign up form using the Maz-UI library. For more information about this specific component, you can refer to the documentation provided by the library here.

I'm seeing an unexpected format in my phone number field. Instead of the expected appearance as shown in the Maz-UI docs https://i.sstatic.net/fh4qV.png, it looks like this: https://i.sstatic.net/Gzn4b.png

Below is a snippet of the relevant code from my component:

<template>
 <div>
   <MazPhoneNumberInput
     v-model="phoneNumber"
   />
   ... additional code that is not directly related to this issue.
 </div>
</template>

<script>
 import { MazPhoneNumberInput } from 'maz-ui'
 import 'maz-ui/lib/css/maz-phone-number-input.css'
 export default {
  name: 'CuiRegister',
  components: { MazPhoneNumberInput },
 }
 ... code for handling the form submission that is not directly relevant to this question
</script>

Answer №1

The issue you are facing is due to the improper import of CSS file.

To resolve this, make sure you import the component along with its CSS files correctly:

import MazPhoneNumberInput from "maz-ui/lib/maz-phone-number-input";
import "maz-ui/lib/css/base.css";
import "maz-ui/lib/css/maz-phone-number-input.css";

Alternatively, you can include the following code in your babel.config.js file:

module.exports = {
  plugins: [
    [
      'component',
      {
        libraryName: 'maz-ui',
        styleLibraryName: 'css'
      }
    ]
  ]
};

You can find more information about the second solution in the documentation available here

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

Enhance the reusability of data and methods within Vue.js

Suppose I have a Vue script structured like the following: <script> export default { name: "BaseCardAnnotationOption", data() { return { includeAnnotations1: false, embedIntoImage: null, burnIntoImage: null, ...

The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure: <li class="block1"> <a title="Block 1 Title" href="get/wzTZKKrI1kQ"> <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"> ...

Add a layer on top of the background in order to cover the entire screen

After researching various SO questions and answers, as well as examining different JSFiddle and Codepen examples, I have yet to find the solution I am looking for... Here is a sample fiddle of my current issue: https://jsfiddle.net/ts4t13hn/3/ Below is ...

How can I show a tooltip in vuetify when a button is disabled?

I am currently using the button and tooltip components in my Vuetify project. I am trying to find a way to only display the tooltip when the button is disabled, but I'm having trouble figuring out how to do it correctly. Right now, the tooltip only a ...

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...

Phonegap - Retaining text data in a checklist app beyond app shutdown

This is my first time developing an app with Phonegap. I am looking to create a checklist feature where users can input items into an input field. However, I am struggling with figuring out how to save these items so that they remain in the checklist even ...

During the compilation process, V8Js encountered an error (ReferenceError) on line 9272, specifying that the

<?php namespace App\Http\Controllers\Auth; use Illuminate\Support\Str; use Illuminate\Support\Facades\DB; use Illuminate\Http\Request; use App\Http\Controllers\Contro ...

Access and expand a bootstrap accordion with a hyperlink

Here is a concept I want to make happen: For my project, I am utilizing Bootstrap v3.4.1 and have set up two columns next to each other. My goal is to link the elements in the hotspot banner (left column) to trigger and open the corresponding Accordions ( ...

Vue 3 template refs doesn't quite mirror the true state of the DOM

I'm working on a website to help users plan study schedules. Currently, I'm developing an Add/Remove subject section which allows users to add, edit, or remove subjects with an id and name. The subjects added will be displayed as a list of <i ...

Having trouble fetching configuration values with Vue.js

console.log(process.env.test); displays "undefined" in the console. In the dev.env.js file, I have the following configuration. Do you see anything that I might have overlooked? 'use strict' const merge = require('webpack-merge') con ...

Creating a custom request for the Upload component in Ant Design Vue requires a specific set of steps and

I attempted to implement the solution provided in How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest? but it doesn't seem to be working for me in Ant Design Vue. Could someone provide an example, please? ...

Component nesting is not supported; cannot render a component inside a

I've set up a simple Vue application within Rails, but I am encountering an issue: hello_vue.js: import Vue from 'vue/dist/vue.esm' import TurbolinksAdapter from 'vue-turbolinks' Vue.use(TurbolinksAdapter) import CollectionSet f ...

Nuxt - Guarding Against HTML Injection with Webpack's Plugin

Currently, I am in the process of transitioning a Vue.js App to an Nuxt.js App. Previously, we utilized the favicons-webpack-plugin to create favicons during compilation. These were then embedded into the HTML using html-webpack-plugin. After the migratio ...

Guide on toggling a modal in a nested component with a prop in Vue.js

Here is my current child component setup: <Edit @fetchInfo="fetchInfo" :agencyData="agency" :dialogEdit.sync="dialogEdit" ></Edit> This component essentially features a modal. Initially, the modal is hidden: data(){ r ...

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

Sending markdown files to Vue components via router

Using VueJS, I have externally generated markdown files that I want to convert into static pages using a vue component. To achieve this, I am utilizing the vite-plugin-md to transform imported md files into components. Example in Action Configuration (vit ...

Struggling to Refresh Vue Data

Within the mounted hook of my Vue app, I have the following code snippet: let vm = this; $("button[name='daterange']") .daterangepicker({ ranges: vm.presets, opens: 'left', format: 'YYYY-MM-DD', startDate: s ...

Minimize the empty space at the top of the website

Looking to eliminate the extra space at the top of this particular website. After attempting to use firebug, I still can't pinpoint the source of this unwanted spacing. Your guidance would be greatly appreciated. Thank you! ...

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

Troubleshooting: CSS Animation issue with fade in and transform effects on individual words

I want to achieve a cool effect where each word starts at 0 opacity and translateY(65px), then fades in one word at a time while transitioning to translateY(0). Although the words are fading in, they are not translating as desired. For reference, check out ...