i am trying to use dree to get the folder structure as a json object.
i have installed the package following the link : https://www.npmjs.com/package/dree
To test i have given the path to my components folder in my project
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App "/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
const dree = require('dree');
const tree = dree.scan('./components');
console.log(tree);
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
If I console.log (dree) then it's giving me the result but console.log(tree);
is giving me the below error. Please help.
index.js?517d:325 Uncaught TypeError: Cannot set property 'sizeInBytes' of nullenter code here at Object.scan (index.js?517d:325)
Dree uses the node fs module, that is not supported in browsers. Hence, dree is not supported in browsers.
Here you can find useful pieces of information about the modules with no browser-support used in vuejs, maybe you could use it at build-time and not run-time.
Unable to require 'fs' with Vue CLI 3
Related
I'm trying to use a component from a node module I installed in Vue3, but it won't work.
I used:
npm install --save vue-slick-carousel
my component
<template>
<div>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
export default {
name: 'MyComponent',
components: {
VueSlickCarousel
}
}
</script>
It seems like components from the node_modules folder won't work in general, because I have tryed to use an other library. My own components from the src/components folder work perfectly.
I also tryed to register the component globally in my main.js file, but it also won't work.
In my browsers console I always get this error:
Uncaught TypeError: this.$scopedSlots is undefined
Can anyone help?
I want to import modules in examples folder in THREE.js such as OBJLoader into my Nuxt Project.
I can import main folder of THREE, but error occurs when trying to import modules in examples folder.
Tried these steps in official docs.
https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules
I'm getting error below
SyntaxError
Unexpected token {
<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>
here are my github repository
https://github.com/ksuhara/threejs-test
Finally I could find what was wrong.
Well, it has to do with nuxt building system. When using third parts libs, you should add them into nuxt.config.js bild->transpile array so it can be included as a dependency with Babel.
transpile: [
"three"
]
Ref: https://nuxtjs.org/api/configuration-build#transpile
Threejs must be run on the client side so enclosed the component with <client-only> tag and loaded it dynamically with const MyComponent = () => import('~/path/to/MyComponent.vue'); but now I am getting the error on server side.
Finally I managed to do it like this!
<template>
<div>
<client-only>
<threejs-component />
</client-only>
</div>
</template>
<script>
export default {
components: {
ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null
}
}
</script>
inside ThreejsComponent.vue are all the threejs imports
I am new to Nuxt and having issues importing components.
components/Header.vue
<template>
<h1>Header</h1>
</template>
index.vue
<template>
<Header />
</template>
<script>
import Header from '#/components/Header';
export default {
components: {
Header
}
};
</script>
Replace the # with ~ but did not change anything
This is the error I am getting.
#/components/Header in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/buyer/index.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #/components/Header
I have the following Vue component:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
mounted(){
// this is syntax error
import './assets/js/otherjsfile.js'
}
}
</script>
As is clear from the code snippet, I want to have the otherjsfile.js loaded in mounted() hook. That script file has certain IIFEs which expects the html of the web page to be fully loaded.
So how do I invoke that js file in a lifecycle hook?
This is the pattern I use. The example is importing a js file which contains an IIFY, which instantiates an object on window.
The only problem with this would occur if you want to use SSR, in which case you need Vue's <ClientOnly> component, see Browser API Access Restrictions
mounted() {
import('../public/myLibrary.js').then(m => {
// use my library here or call a method that uses it
});
},
Note it also works with npm installed libraries, with the same path conventions i.e non-relative path indicates the library is under node_modules.
I'm a little unsure of what your asking. But if you are just trying to include an external js file in your page, you can just use the script tag in your template and not have to put anything in your mounted function, like this:
<template>
<div id="wrapper">
<div class="main-container">
<Header />
<router-view/>
<Footer/>
</div>
<script src="./assets/js/otherjsfile.js"></script>
</div>
</template>
<script>
import './assets/js/popper.min.js';
// other imports
// ....
export default {
name: 'App',
components : {
Header,
Footer
},
}
</script>
Does this solve your issue?
There is a basic tutorial for getting Nuxt going here:
https://github.com/nuxt-community/starter-template . I like all the stuff that Nuxt puts in place ; structure etc.
Next is installing the Kendo stuff from here:
https://www.telerik.com/kendo-vue-ui/getting-started/
npm install --save #progress/kendo-ui
npm install --save #progress/kendo-theme-default
npm install --save #progress/kendo-dateinputs-vue-wrapper
I have tried to put the steps into the index.vue page
( have removed the styles from the bottom just to make it less code )
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
vtest2
</h1>
<h2 class="subtitle">
Nuxt.js project
</h2>
<div class="links">
<a
href="https://nuxtjs.org/"
target="_blank"
class="button--green">Documentation</a>
<a
href="https://github.com/nuxt/nuxt.js"
target="_blank"
class="button--grey">GitHub</a>
</div>
<kendo-calendar :value="new Date()"></kendo-calendar>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import { Calendar } from '#progress/kendo-dateinputs-vue-wrapper'
export default {
components: {
AppLogo,
Calendar
}
}
</script>
<style>
</style>
When I run npm run dev , it compiles but when I open the page I get:
ReferenceError
window is not defined node_modules\#progress\kendo-ui\js\kendo.core.js
});
return observable;
};
})(jQuery, window);
return window.kendo;
}, __webpack_require__(3));
what am I doing wrong?
Kendo for Vue does not support Server Side Rendering, but you can create a plugin and then in the nuxt.config.js file you must add it in client mode.
see the example.
/plugins/kendoui.js
import Vue from 'vue'
import '#progress/kendo-ui'
import '#progress/kendo-theme-default/dist/all.css'
import {
KendoGrid,
KendoGridInstaller,
KendoGridColumn
} from '#progress/kendo-grid-vue-wrapper'
import {
KendoDataSource,
KendoDataSourceInstaller
} from '#progress/kendo-datasource-vue-wrapper'
Vue.use(KendoGridInstaller)
Vue.use(KendoDataSourceInstaller)
nuxt.config.js
plugins: [{
src: '~/plugins/kendoui.js',
mode: 'client'
}],
and that's works for me.
Kendo for Vue does not support Server Side Rendering and Nuxt because it needs the window object.