Creating an NPM library in Vue 3 can be a bit tricky when encountering issues with using the ref() function

Hey there! I recently created a basic Vue 3 library with the following code:

export class RefTest() {
  private ref = ref(null)
  constructor(value: any) { this.ref.value = value }

  update(value) {
    this.ref.value = value;
}

}

I used npm link to create an instance of a class from the library, but unfortunately, nothing seems to be working. Reactivity has stopped functioning for some reason. Additionally, the file containing all the library code is quite large at 160 kilobytes. It appears that Vue 3 was compiled and included in this file, which is causing issues and bloating the size. Here is the dependency file:

{
  "name": "ref-tets",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  },
  "files": [
    "dist"
  ]
}

I specified Vue 3 as a peer dependency, but it doesn't seem to have resolved the issue.

Answer №1

Don't forget to include the ref import from Vue.

To ensure functionality, make sure to place the following line at the beginning of your code snippet.

import { ref } from "vue"

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

What is the best way to present both paragraphs and images from a div in a sequential order

Currently, I am developing a compact web tool to assist editors in creating content by utilizing buttons to insert paragraphs and images. The elements are saved with an ID (beginning at 0 and increasing for each new element) and can be previewed in a div n ...

Managing cookie-related changes to CSS classes using jQuery can present challenges

I stumbled upon an interesting solution for changing background color and storing it in a cookie by utilizing jquery.cookie. After making a few tweaks, it worked smoothly: $(document).ready(function () { $("body").css("background-image",$.cookie("<?ph ...

Issues with using this.transitionTo in Ember.js

Exploring the integration of Ember.js with Phonegap, I have implemented the Confirm API. However, I am encountering an issue where executing this.transitionTo('index') from the event-driven function onConfirm is proving to be a challenge. Any th ...

Retrieve the div element by calling a scriptlet with JavaScript

I am facing an issue with a web page that includes a scriptlet like this: <div id="flash_chart"> <%=content_data['report_text']%> </div> The variable content_data['report_text'] contains a lengthy string ...

Webjars dependency remains unresolved despite its apparent presence on Maven Central

Recently, I encountered an issue while trying to use the React Bootstrap library in my build.sbt file. Previously, I had included the following dependency: "org.webjars.npm" % "react-bootstrap" % "0.27.2" However, it seems that a version dependency has c ...

Create a PHP array containing strings and generate two-dimensional arrays as a result

One issue I encountered in PHP involves creating an array with a string while also cutting some images. Within my code, buildProject.php is included in index.php (with session_start(); for _session at the top). buildProject.php <?php $list_project = ...

Explore creating a dial number using React

Hey there, I'm currently working on developing a component. Just to clarify, I am not using react-native for this project. Instead, I would like to utilize React to scroll a number similar to how an image scrolls. https://i.sstatic.net/c1Tu8.png Th ...

The transformation of interfaces into types using module augmentation in Typescript

Can interface be changed to type when adding modules with TS? I am looking to customize the Theme in Material-UI with my own properties. I have created a file called createPalette.d.ts: import '@material-ui/core/styles/createPalette'; declare mo ...

The attribute 'split' is not found on the never data type

I have a function that can update a variable called `result`. If `result` is not a string, the function will stop. However, if it is a string, I then apply the `split()` method to the `result` string. This function always runs successfully without crashin ...

**Finding the Index of a Table Row in Vue-Tables-2**

Recently, I came across some vue code that utilizes vue-tables-2. The table in question is quite simple and looks like this... <v-client-table :data="myRows" :columns="columns" :options="options"> <div slot=" ...

Guide to combining multiple Vue files into a single import

To streamline the imports in my Vue.js app, I decided to create an index.js file where I could import all necessary files like this: import AddMember from "./AddMember.vue"; import EditMember from "./EditMember.vue"; export { AddMember, EditMember, } ...

Locate the nearest element below a specified element when clicked using JavaScript

I've created a dynamic form that allows users to add or delete rows, and here is the code: // HTML <div class="row"> <div class="col-xs-4"> <ul> <li><input type="checkbox"></li> <li><inpu ...

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

[Help needed! I am trying to store the marks, id, and name values of each cell in objects of an array. However, I am not getting the correct answer. Can someone guide me on how to properly store the marks and id of each cell in objects of an array? const [ ...

Using the `ng-repeat` directive as an argument in a Javascript function

I am struggling to pass the ng-repeat element to a JavaScript function, but it's not working as expected. <tr ng-repeat="x in myArry"> <td><input type="text" value="{{x.firstname}}" id="{{x.firstname}}{{$index}}" onblu ...

What could be the reason why my AJAX error is not displaying the exception from my Webmethod?

I am currently utilizing Google Chrome for my work tasks. After referring to , I attempted to throw an exception from a webmethod. However, no output is shown in the console.log. The only information I received is a generic error message from the network ...

What is the reason for the continual influx of new users being added to the database?

I have a Node.JS and MongoDB console application where I've implemented adding users in one file and outputting all collection objects to the console in another file. When running the command - node scripts/get_all_users.js, both existing users are di ...

Comparing JSON files in JavaScript to identify and extract only the new objects

I need a way to identify and output the newly added objects from two JSON files based on their "Id" values. It's important for me to disregard changes in object positions within the files and also ignore specific key-value changes, like Greg's ag ...

My program is struggling to retain its variable

Whenever I select an item from a list (li), I want to add it to the existing values stored in the variable var values. However, each time I pick an item, the variable seems to reset. I am certain that there is a mistake in my code, but I can't seem t ...

Error: The AjaxMethod "Class" is not defined

I have an older asp.net project that utilizes Ajax.AjaxMethod() to invoke server-side code from Javascript. It used to function properly, but now it has suddenly ceased to work. Here is the C# code behind: public partial class Signup : System.Web.UI.Page ...

Exploring VueJs 3: Strategies for loading and implementing actions on a component before mounting

Briefly: Can a virtual node be created outside of the DOM to preload images, seek videos... without ever being mounted in the real DOM? Detailed version: I want to ensure that the next slide appears only when it is fully initialized for a slideshow in Vu ...