Third party VueJS component can't be found in node_modules

Question

Using vue-cli version 3 for a new vuejs project (I've been studying a lot of vuejs , but this is the first time trying to implement a third-party component). I'm trying to use a grid component that looks impressive. The component is here .

I've setup my environment, installed the grid and component using npm as instructed from their site, configured my own component and imported everything (I thought) properly. I've even setup an data array property to use as a test to fill my grid. I ran npm install and confirmed the folders were installed in my node_modules folder (they are there). Here is my main.js :

import Vue from 'vue'
import App from './App.vue'
import CGrid from 'vue-cheetah-grid'

Vue.config.productionTip = false;
Vue.use(CGrid);

new Vue({
  render: h => h(App)
}).$mount('#app')

And here is my App.vue :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <reports-grid></reports-grid>
  </div>
</template>

<script>
import ReportsGrid from './components/ReportsGrid.vue'

export default {
  name: 'app', 
  components: {
    reportsGrid: ReportsGrid
  }
}
</script>

Here is my component file, ReportsGrid.vue :

<template>
    <div class="grid">
        <c-grid ref="grid" :data="records" :frozen-col-count="1">

            <c-grid-column field="team" width="85">
                Team
            </c-grid-column>
            <c-grid-column-group caption="Estimate">

                <c-grid-column field="quotenum">
                    Quote #
                </c-grid-column>

                <c-grid-column field="quotedate">
                    Date
                </c-grid-column>

                <c-grid-column field="customer">
                    Customer
                </c-grid-column>

                <c-grid-column field="country">
                    Country
                </c-grid-column>

                <c-grid-column field="type">
                    Type
                </c-grid-column>

                <c-grid-column field="quoteamount">
                    Quote Amount
                </c-grid-column>
            </c-grid-column-group>
            <c-grid-column-group caption="Sales Order">

                <c-grid-column field="salesordernum">
                    Sales Order #
                </c-grid-column>

                <c-grid-column field="salesorderamount">
                    Sales Order Amount
                </c-grid-column>

                <c-grid-column field="margin">
                    Average Margin
                </c-grid-column>

                <c-grid-column field="status">
                    Status
                </c-grid-column>
            </c-grid-column-group>
        </c-grid>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data: function() {
            return {
                 records: [
                {
                    team: 'GG', quotenum: '20211', quotedate:'today', customer: 'AirNN', country: 'Peru', salesordernum: '11111',
                    type: 'Production', quoteamount: '$1300', salesorderamount: '$1200', margin: '25%', status: 'WIN Partial'
                },
                {
                    team: 'LL', quotenum: '20200', quotedate:'today', customer: 'Paris', country: 'Mexico', salesordernum: '11122',
                    type: 'Bid', quoteamount: '$12300', salesorderamount: '$10300', margin: '20%', status: 'WIN Partial'
                }
            ]

            }
        }
    }
</script>

When I run this I don't see anything on my page (no errors either). I noticed in my main.js my linter is throwing an error on the line import CGrid from 'vue-cheetah-grid' (this error doesn't show up in my terminal, just in my main.js:

[ts]
Could not find a declaration file for module 'vue-cheetah-grid'. 'path.to/node_modules/vue-cheetah-grid/dist/vueCheetahGrid.js' implicitly has an 'any' type.
  Try `npm install @types/vue-cheetah-grid` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-cheetah-grid';`

This is a new error to me. The folders are in the node_modules folder. I even tried the npm install @types/vue-cheetah-grid but it still didn't work.

Answer 1

The problem appears to be with the height style.

Looking at the page source for the Cheetah Vue demo, they have dropped in some styles that seem to override the standard cheetah styles.

If you add this to your component, it looks ok

<style scoped>
  html {
    height: 100%;
  }
  body {
    height: calc(100% - 100px);
  }
  .contents {
    padding: 30px;
    box-sizing: border-box;
  }
  .demo-grid {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    border: solid 1px #ddd;
  }
  .demo-grid.large {
    height: 500px;
  }
  .demo-grid.middle {
    height: 300px;   
  }
  .demo-grid.small {
    height: 240px;   
  }
  .log {
    width: 100%;
    height: 80px;
    background-color: #F5F5F5;
  }
  .hljs { 
    tab-size: 4;
  }
</style>