I'm having trouble locating a declaration file for the module 'vue-prism-component'

Currently utilizing Vue 3 (Composition API), Vite, and Typescript but encountering a missing module issue with vue-prism-component.

<script lang="ts" setup>
import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import Prism from 'vue-prism-component'

</script>

The declaration file for module 'vue-prism-component' is not found. The path '/Users/haotranhuynhhuy/Desktop/Vuejs/jarvis 2.0/node_modules/vue-prism-component/dist/vue-prism-component.common.js' implicitly has an 'any' type.
  Attempt 'npm i --save-dev @types/vue-prism-component' or create a new declaration (.d.ts) file containing `declare module 'vue-prism-component';`

3 import Prism from 'vue-prism-component'

Unable to install the library @types/vue-prism-component as it does not exist.

npm ERR! code E404

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-prism-component - Not found

npm ERR! 404 '@types/vue-prism-component@*' is not in this registry.

npm ERR! 404 Note that you can also install from a

npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/haotranhuynhhuy/.npm/_logs/2022-12-16T07_22_15_496Z-debug-0.log

Consider declaring a file for the module 'vue-prism-component'.

Answer №1

Include the declaration module 'vue-prism-component' in shims.d.ts file

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

Vue.JS enables the seamless addition of rows to a form on the fly

I am currently working on creating a dynamic form using Vue. The concept is that when the user clicks the add button, another row will appear for them to input data. However, I encountered an issue where initially only 1 row was set up, but when I added th ...

Having trouble displaying API values in b-form-select component in Vue.js?

I am using an API to fetch users data and I want to bind these users to a b-form-select component in Bootstrap Vue. However, after making the request, I only see "null" in the b-form-select. Here is my request: getAllUsers() { axios.get(&a ...

A guide on fetching the selected date from a datepicker in framework7 with the help of vuejs

Here is a snippet of the code for a component I am working on: <f7-list-input label=“Fecha de nacimiento” type=“datepicker” placeholder=“Selecciona una fecha” :value=“perfil.fecha_nacimiento” @input=“perfil.fecha_nacimiento = $event.t ...

Converting text data into JSON format using JavaScript

When working with my application, I am loading text data from a text file: The contents of this txt file are as follows: console.log(myData): ### Comment 1 ## Comment two dataone=1 datatwo=2 ## Comment N dataThree=3 I am looking to convert this data to ...

Using an external script to modify or call a Vue.js method

My Vue app is constructed using Webpack and includes a few basic computed properties, such as calculating the sum amount from input values. However, I now require the capability to replace the summation function with one stored in a separate file that is n ...

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

I've been facing an issue with a simple POST method to my API through the browser. The request fails, but when I try the same on Postman, it works fine. The response includes a JSON string and two cookies. In an attempt to resolve this, I set the hea ...

What's the best way to organize a list while implementing List Rendering in VueJS?

Currently, I am working on List Rendering in Vue2. The list is rendering correctly, but it appears ordered based on the data arrangement in the array. For better organization, I need to sort each item alphabetically by title. However, I am facing difficult ...

Does Vuejs have a counterpart to LINQ?

As a newcomer to javascript, I am wondering if Vue has an equivalent to LinQ. My objective is to perform the following operation: this.selection = this.clientsComplete.Where( c => c.id == eventArgs.sender.id); This action would be on a collect ...

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button? https://i.stack.imgur.com/niZK1.png import {Tooltip} from '@mui/material'; <Tooltip titl ...

After a push to the router, scrolling is disabled

While working on a Vuejs project, I encountered an issue when trying to change the page of my PWA using this.$router.push();. It seems to work fine everywhere else except when doing it from a modal within a component. The pushed page loads but scrolling is ...

Is there a way to change a .pptx document into a base64 string?

Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation( ...

"Looking to display an image object retrieved from AWS S3 using a signed URL in Vue.js? Here's how you

<div v-for="(data, key) in imgURL" :key="key"> <img :src= "getLink(data)" /> </div> imgURL here is an array that contains file names. methods: { async getLink(url){ let response = await PostsService.downloadURL({ i ...

Having issues with incorporating a component into another component in VueJS

Having spent approximately 30 hours on diving into VueJS, I am encountering some difficulties when it comes to using a component within another component. Seeking assistance from someone knowledgeable in this area to provide me with some clarification. Pr ...

When the component is initialized, the computed property is not being evaluated

My maps component initializes a Google map, adds markers based on props passed from the parent, and sets the correct bounds of the map. However, the markers are added through a computed property to make it reactive. Everything seems to be working fine, exc ...

Bringing custom JavaScript functions into a Vue.js component

In my Vue.js project, I have an abundance of Javascript processing that is all local and doesn't require server-side functionality. I'm exploring the possibility of importing a file containing specific processing functions (such as mathematical a ...

The function Getter is expected, but an error has occurred with "getters.doubleCounter" returning a value of 20 in VUEX

Currently, I am diving into the world of Vuex and encountering some challenges along the way. In my attempt to create a getter on my vuex instance, I am facing an error when trying to display data from one of my components: The getter should be a functi ...

Exploring the function of variables in VueJS

I'm facing a tricky issue with VueJS as I am still getting acquainted with it. My objective is to access and modify variables within the data function, but so far, I haven't been successful. The problematic line: console.log('item: ' ...

Utilizing Vue to send information to the POST function

I am encountering an issue with passing data to the Vue.js post method. I am using vue-resource and according to the documentation, it should be structured like this: this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCall ...

Transform the v-model value from numerical to textual representation

Currently, I am using the <q-select> component and populating it with options fetched from an API. The issue arises when setting the value as the ID of the object, which is a number while the component expects a string, resulting in an error. <s- ...

Utilizing v-model alongside various JavaScript plugins within a single select element

I've incorporated the jQuery plugins select2 and datepicker into my project, utilizing custom directives for them. Everything was functioning smoothly until I attempted to retrieve the selected value using v-model, which resulted in a failure to bind ...