Struggling a bit here. I am diving into npm and configuration files for the first time. The current challenge involves setting up a vue project (though it might not be directly related to the issue) with typescript and then reusing its code and components.
Encountering two specific issues:
1. Ending up with two Vue copies - one in the library project and another in the secondary project utilizing this library.
2. Missing type definitions for Vue in the lib, which could potentially be resolved once the first problem is tackled.
My attempts so far include linking the library project using npm link, importing with relative paths, and building with vue-cli --target lib (where Vue should be externalized). However, none of these attempts have yielded positive results. Perhaps I'm missing something in my approach. I've also checked out similar libraries like Buefy, Vuetify, Vue-router, but none seem to be integrating typescript with vue-property-decorator or making use of import 'vue'.
Here's the structure:
-- some folder
|--- lib
|--- vue (package.json)
|--- Test.vue
|--- type definitions
|--- project
|--- vue (package.json)
The error message points towards $propertyA not being defined on Vue (Property or method "$propertyA" is not defined on the instance but referenced during render). Interestingly enough, using String.has seems to work without any issues. The standard code used by other projects that functions correctly looks like this:
<template>
<div>{{msg}} -> {{$propertyA}}</div>
</template>
<script>
export default {
name: 'Test',
data: () => ({
msg: 'TEST'
})
}
</script>
However, when working with the below code in the library, things start to break:
<template>
<div>{{msg}} -> {{$propertyA}}</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
private msg = 'TEST';
}
</script>
Regarding the type definitions:
import Vue from 'vue';
declare module 'vue/types/vue' {
export interface Vue {
$propertyA: string;
}
}
declare global {
interface String {
has: (x: string) => boolean;
}
}
I'm uncertain about the right strategy to tackle this issue. It seems like having separate projects leads to each one having its own Vue copy, causing discrepancies such as one having $propertyA while the other does not.