vue-requests

vue-requests copied to clipboard

Hello, i need a module to show a complex data table from a json source or markdown file. My idea was to use vuetable-2.

.vuepress/components/Vuetable.vue

<template>
  <vuetable ref="vuetable"
    api-url="http://localhost:8080/switches.json"
    :fields="['name', 'brand', 'img']"
    :show-sort-icons="true"
    data-path="data"
    pagination-path=""
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2'

export default {
  components: {
    Vuetable
  }
}
</script>

.vuepress/public/switches.json

{
  "data": [{
      "brand": "Gateron",
      "name": "Clear",
      "type": "Linear",
      "travel": "4.0",
      "pressure": "35",
      "img": "https://keycapsss.com/media/image/22/a2/a1/gateron-mx-5-pin-keyboard-switch-red-1_600x600.jpg"
  }]
}

In the readme.md i us <Vuetable/> as the placeholder.

If i rund npm run dev everything works, but with build i get this error.

wait Rendering static HTML...
Rendering page: /switches.html[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> <Vuetable>
       <Vuetable>
         <V1b76fb56>
           <Content>
             <Page>
               <Layout>
                 <Anonymous>
                   <Root>
error Error rendering /switches.html: false
undefined
ReferenceError: document is not defined
    at o (node_modules/vuetable-2/dist/vuetable-2.js:1:7082)
    at r (node_modules/vuetable-2/dist/vuetable-2.js:1:6912)
    at t.exports (node_modules/vuetable-2/dist/vuetable-2.js:1:8539)
    at Object.<anonymous> (node_modules/vuetable-2/dist/vuetable-2.js:1:77868)
    at e (node_modules/vuetable-2/dist/vuetable-2.js:1:307)
    at VueComponent.r (node_modules/vuetable-2/dist/vuetable-2.js:1:23802)

The repo can be found here. https://github.com/BenRoe/awesome-mechanical-keyboard/tree/vuepress

If someone can fix this error, or has a different approach to display a data table with vuepress, that would be awesome 😃