I'm currently facing a challenge involving the integration of Zurb Foundation v6.5.3 into a VueJS project that is TypeScript-based and was created using @Vue/CLI. The project already includes jQuery type definitions. In the code snippet below, you can see where Foundation is initialized with the $(document).foundation() command.
<template>
<div>
<p>TEST</p>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import $ from 'jquery';
@Component({
components: {},
mounted: () => {
$(document).foundation();
},
})
export default class Layout extends Vue { }
</script>
Unfortunately, during the compilation process of the project, an error message is displayed which prevents it from running properly.
The error states: Property 'foundation' does not exist on type 'JQuery'.
This issue occurs with typescript version 3.4.5 and tslint version 5.16.0. Has anyone encountered this problem as well or discovered a solution for seamlessly incorporating Foundation into a VueJS project with TypeScript?