Develop Reference

"TypeError: Class constructor IF cannot be invoked without 'new'" while integrating custom CKEditor build to a VueJS 2.* application

I tried integrating CKEditor 5 to a VueJS v2.6 application . I opted for custom build option using online builder provided by CKEditor (https://ckeditor.com/ckeditor-5/online-builder/). As I need custom addition of plugins, custom build is the preferred option.
After taking a basic build , followed the exact same steps mentioned in the below link :
https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v2.html#integrating-a-custom-build-from-the-online-builder.
I added the editor tag in Collaboration.vue component inside App.vue .
Collaboration.vue
<script>
import Editor from 'ckeditor5-custom-build/build/ckeditor';
export default {
name: 'Collaboration',
components: {
editor: Editor,
},
data() {
return {
editor: Editor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
};
</script>
<template>
<div>
<b-card class="mt-2 custom-header-wrapper">
<h4 slot="header">Editor</h4>
</b-card>
<div v-if="editorData" class="preview">
<editor :editor="editor" v-model="editorData" :config="editorConfig"></editor>
</div>
</div>
</template>
Below is the error I got on opening Collaboration.vue component where I added the editor tag .
How can I solve this issue?

React cant find a module

I am trying to insttall https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, I think maybe there are 2 motives for not work.
1- In my html inside body tag this tag appears:
<noscript>You need to enable JavaScript to run this app.</noscript>
2- When I hover the module that I install via NPM, vscode show me this:
I am using react hooks, here I found information of how to use it https://github.com/wagerfield/parallax/issues/167
And also here on demo samples
https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html
I have literally hours trying to know whats the problem!
This is my jsx code:
import React, {useEffect, useRef} from 'react';
// #ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';
const Home = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div id="container">
<div id="scene" ref={sceneEl}>
<div dataDepth="1.00"><img src={Layer1} /></div>
<div dataDepth="0.80"><img src={Layer2} /></div>
<div dataDepth="0.60"><img src={Layer3} /></div>
<div dataDepth="0.40"><img src={Layer4} /></div>
<div dataDepth="0.20"><img src={Layer5} /></div>
<div dataDepth="0.00"><img src={Layer6} /></div>
</div>
</div>
)
}
export default Home;
In my browser I can see this:
But it doesn't hace the "parallax" effect 😥.

That's because you are using TS and there is no types declaration on the side of the library. I think you can simply fix this doing exactly what the console shows.
I you don't have a .d.ts file, just create one and add declare module 'parallax-js';
After this, if you didn't have the file yet, add it to the include property of your tsconfig.json file and you should be fine.

Vue js - Getting Uncaught ReferenceError: jQuery is not defined

I am new to Vue.js and trying to create a custom component that uses jQuery formBuilder plugin. When I include the component file inside another component, I am getting an error:
Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js
I created a custom component with name formBuilder.vue. Here is the component code:
<template>
<div class="content">
<formBuilder/>
</div>
</template>
<script>
// import './jquery.min.js';
// import './jquery-ui.min.js';
// import './form-builder.min.js';
export default {
created() {
},
data() {
return {
}
},
mounted() {
jQuery(this.$el).formBuilder();
},
methods: {
}
}
</script>
In app.js file, which is placed in resource/js/app.js, I am calling this vue to be recursively used by other components:
window.Vue = require('vue');
require('./bootstrap');
require('admin-lte');
require('./datatable');
import router from './router';
import Datepicker from 'vuejs-datepicker';
import CKEditor from 'ckeditor4-vue';
import FullCalendar from 'vue-full-calendar';
import 'fullcalendar/dist/fullcalendar.css'
import Vue from 'vue';
import jQuery from 'jquery'
import './form-builder.min.js';
Vue.use(VueRouter)
Vue.use(FullCalendar);
Vue.use(CKEditor)
Vue.component("vue-datepicker", Datepicker);
Vue.component('FormBuilder', require('./components/tools/formBuilder.vue').default);
const app = new Vue({
el: '#app',
router
});
This is the component file where i am using formbuilder component
<template>
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Questionnaire</h1>
</div>
<div class="col-sm-6"></div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<FormBuilder/> <!--- used formbuilder component --->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
},
data() {
return {
}
},
methods: {
}
}
</script>
I have attached the error as well.
Can you guys help me find where I am doing wrong?
Thanks in Advance.

Importing an object into Vue's app JS doesn't automatically produce that object for use by other components.
There are at least two ways to do this (though I recommend avoiding all this and just importing jQuery in the components that need it):
Option 1: Vue.prototype
In your app JS, add jQuery to the Vue prototype after you import it, which will make it accessible to every component using the syntax this.jQuery:
Vue.prototype.jQuery = jQuery
Option 2: window object
Alternatively, you could add it to the window object after importing and use it like window.jQuery:
window.jQuery = jQuery
Option 3: Individual imports
It's probably more readable/maintainable to simply import it in components that use it:
import jQuery from 'jquery'
and then you can use it with the syntax in your example.

That worked for me (Vue 3)
for some reason i had to stop the cli and restart
window.$ = window.jQuery = require('jquery');
Eslint may return "Unexpected top level property" "$". You will need to insert an exception in your package.json
"env": {
...
"jquery": true,
},
It is important to know that jquery will only be available in .vue files. Therefore, your extensions and libraries may report an error. In these cases you will have 2 options:
Transform libraries into a .vue template
Make a local import on top of them.
import jQuery from 'jquery'

Why won't BootstrapVue Render?

I recently used npm to install BootstrapVue with:
npm install vue bootstrap-vue bootstrap
I then included BootstrapVue into the root of my project like so:
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Finally, this is the template I am using to test the BootstrapVue component:
<template>
<div>
<search-bar />
<div v-for="post in posts" :key="post.id">
<post :postData="post" />
</div>
<b-button pill >TEST</b-button>
</div>
</template>
When I go to check the web page, the button appears, but it renders with no styling. The strange thing is that when I check the Vue dev tools extension, the BButton component is recognized and contains all the styling properties included (in this case, just the "pill" option set to true). I even inspect the button element on the DOM and it contains the classes that were passed down from BootstrapVue, but none of those styles were rendered. What am I missing here?
Also, just for good measure, I looked in the package.json file to make sure Bootstrap and BootstrapVue were installed and were up to date. They are.

in your root of your project(app.js), you will need to add 2 more lines
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
To import the css files

Using a component containing other components within a router-view in Vue.js

I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq