Revisiting Vue - Running Multiple Instances of Vue.js

I am facing an issue with my Vue.js library that I included in a Nuxt.js project. The problem is that there are duplicate instances of Vue.js being created from both the Nuxt instance and the library, which is causing various issues:

https://i.sstatic.net/13pOH.png

It's printing twice from two different instances, and I need to ensure only one instance is used.

How can I resolve this and make sure only one instance is utilized? This duplication is leading to errors.

Here are the steps I have already taken:

  • The webpack configuration of the library specifies 'vue' as an external dependency. (I'm puzzled how it still dynamically imports despite being marked as external in the library)
  • 'vue' is set as a peerDependency in the package.json file of the library.

Additional details:

  • The library is linked in the Nuxt project using npm link
  • This issue results in errors such as '$attrs is readonly.'
  • This occurs only in development; production builds work without any errors.
  • The first instance is from webpack:///./node_modules/vue/dist/vue.runtime.esm.js?2b0e (Nuxt.js), while the second instance is from webpack-internal:///../minerva/node_modules/vue/dist/vue.runtime.esm.js (the library).

The library exports a component and has the following webpack configuration:

[Code snippet omitted for brevity]

It is imported and used in the Nuxt project as follows:

[Code snippet omitted for brevity]

Your assistance in resolving this issue would be greatly appreciated. Thank you!

javascriptvue.jswebpackvuejs2nuxt.js

Answer №1

To address the issue at hand, my suggestion would be to incorporate a Plugin for seamlessly importing your desired library.

Consider this scenario: I have a specific file named my-custom-plugin.js:

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

Furthermore, in the context of nuxt.config.js

plugins: [
    {
        src: '~plugins/nuxt-quill-plugin',
        ssr: false
    }
],

By integrating these solutions, it is likely that your problem will be successfully resolved.

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

Installing Vue JavaScript using the npm command

Embarking on my journey as a Vue JS learner, I took the plunge to install Vue and delve into creating web applications using it. So, I globally added npm Vue. npm install --global vue-cli This action resulted in: npm WARN deprecated [email protected]: T ...

javascriptvue.jsnpmnpm-install

What does the term "slim" refer to in the file named

I recently installed jQuery via npm and came across a file named jquery.slim.js. I understand that min indicates the file is minified, but what does slim mean? It seems like slim is different from min, as there is also a file called jquery.slim.min.js, wh ...

javascriptjquerynode.jsnpmjquery-3

Dividing component files using TypeScript

Our team has embarked on a new project using Vue 3 for the front end. We have opted to incorporate TypeScript and are interested in implementing a file-separation approach. While researching, we came across this article in the documentation which provides ...

typescriptvue.jsvuejs3

Identifying Mistakes to Address Promise Failures

I encountered unhandled promise rejection errors and attempted to catch them and log them after each .then statement. Unfortunately, I ran into an 'unexpected token' issue when running the code on my server due to the period before .try. Despit ...

javascriptnode.js

What is the best way to retrieve JSON data in ReactJS through ExpressJS?

Exploring the realms of reactjs and expressjs, I am seeking guidance on how to extract data from reactjs and store it in a variable. My current achievement includes successfully executing res.send to display the data. app.get('*', (req, res) =& ...

javascriptnode.jsreactjsexpress

Angular File Sorting Error in Gulp detected

After including .pipe(angularFilesort()) in my gulp script, the task runs wiredep but never proceeds to the default task. It just stops after executing wiredep. However, if I remove .pipe(angularFilesort()), the script works perfectly fine. Can someone h ...

javascriptangularjsgulp

Tips for retrieving the chosen value from an ajax.net ComboBox using javascript

Is there a way to extract the selected value from an ajax.net combobox using JavaScript for client-side validation? What would be the most effective method to achieve this? Thank you. This is how I managed to obtain the value: var combo = $get('ddl ...

javascriptcomboboxajax.net

What method works most effectively for breaking down a large (nested) object?

My objective involves destructuring a large nested object and assigning its properties to variables. Currently, I am doing it this way: const { name, country, sunrise, sunset, timezone } = this.state.weather?.city || {}; const { temp, feels_like } ...

javascriptarraysecmascript-6javascript-objectsdestructuring

Angularjs search filter performance slows down significantly when handling large datasets

I am currently working on an AngularJS client application that displays data in a table using the dir-paginate directive from dirPagination.js. Here is the code snippet: <input type="text" ng-change="SomeTask()" ng-model="vm.searchKeyword" /> &l ...

javascripthtmlangularjsdirpagination

Is there a way to send the image's name as a parameter?

I am facing a challenge in achieving a specific task and need some guidance. My current approach involves passing the image name as a parameter to the cancelimage.php script, but it seems like I am not utilizing the variable 'image_file_name' cor ...

phpjavascriptjquerysqlajax

Update a div with PHP content every 10 seconds using jQuery

Trying to automatically update the information stored in a specific div every 10 seconds using jQuery. Here is my HTML code: <!DOCTYPE html> <head> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-la ...

phpjavascriptjqueryhtmlrefresh

'jQuery' is not recognized as defined, error no-undef

I am currently working on a file that utilizes jQuery for testing purposes: (function($) { "use strict"; // Start of use strict // Configure tooltips for collapsed side navigation $('.navbar-sidenav [data-toggle="tooltip"]').tooltip({ ...

javascriptjqueryreactjsnpmcreate-react-app

Ways to activate the onclick function of a div element with JavaScript

I am trying to trigger the onclick event of my div using a click event in javascript. However, I am only able to trigger the onclick event using jquery. Here is the code snippet: html += '<div id="add_redirect" class="row pl_filter_v ...

javascriptjqueryonclickonload

Generating a fresh object derived from an existing object without saving any modifications

I am facing an issue with using an Array to store boilerplate objects that can be copied, modified, and added to another Array. The problem arises when the new Array takes ownership of the object, causing changes to persist in the original object. For exa ...

javascriptvue.js

The Datepicker in MUI - React is unable to recognize the `renderInput` prop on a DOM element

I've been experimenting with the MUI version 5 DatePicker component. I followed the example provided in the MUI documentation's codesandbox demo. Here is how my component looks: const MonthPicker: FC = () => { const [value, setValue] = Rea ...

javascriptreactjstypescriptmaterial-ui

Implementing jQuery Datepicker with custom validation for start and end dates

Hey there! I could really use some help with a coding issue I'm facing. I've been able to successfully implement the jQuery Datepicker for start/end date validation when using only one Datepicker for both dates. However, I'm struggling to f ...

javascriptjqueryhtmljspdatepicker

Unable to call an object that may be 'undefined': Utilizing a function with a return object that includes asynchronous functions as properties

I have a function exported in my adapter.ts file: import type { Adapter } from "@lib/core/adapters"; export default function MyAdapter (): Adapter { return { async createUser (user: User) { ... }, async findUserByEmail (email ...

javascriptnode.jstypescriptecmascript-6promise

Is there a clever method for automatically importing dynamic components?

Is there a more efficient way to dynamically import dynamic components in Vue? I've come across some examples, but they all feel like workarounds without a clear explanation. Currently, I am importing components individually like this: Vue.component ...

vue.jsvue-component

What is the best way to create multiline scripts within npm scripts?

Here is how my package.json is structured: { "name": "project", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "lint": "./node_modules/eslint/bin/eslint.js --format \"./node_modules/eslint-friendly-formatter/in ...

javascriptnpm

Choosing not to transmit the requested file

I've been attempting to retrieve the following: fetch("https://www.filestackapi.com/api/store/S3?key=MYKEY&filename=teste", { body: "@/C:/Users/Acer/Pictures/1 (2).jpg", headers: { "Content-Type": &quo ...

javascript