I have a vue-cli app where I have installed a plugin:
npm i vue-mover
I have enabled this plugin in main.js
import mover from 'vue-mover'
Vue.use(mover)
And tried to use this in a component.vue
<template>
<div class="lineasMover">
<mover
target-id="MyMover"
:left-items="selectedItems"
:right-items="unselectedItems"
title-left="Available Items"
title-right="Selected Items"
moved-item-location="top | bottom"
>
</mover>
</div>
</template>
When i run my app, I'm getting this error in the browser's console:
"Uncaught ReferenceError: Sortable is not defined"
the plugin has it's code in a file called vue-mover.js, and this is the faulty code:
if (!Sortable) {
throw new Error('[vue-mover] cannot locate `Sortablejs` dependency.')
}
I have installed
npm i sortablejs
and also the vue version
npm i vue-draggable
but still get this error in console. I guess I need to enable a global "Sortable" variable that points to SortableJS, so that any plugin can use it, but I can't figure out how to achieve this.
Any ideas??
Related
I have the simplest nuxt3 project and my button when pressed doesn't register a click event.
Why?
Or where can I look for a solution?
<button #click="console.log('PRESSED')" class="bg-gray-500">GENERATE TEXT</button>
.
Replication:
npx nuxi init replica_project
cd replica_project
npm install --save-dev #nuxtjs/tailwindcss
Added in nuxt.config.ts modules: [ '#nuxtjs/tailwindcss' ]
Put <button #click="console.log('I got hit on')" class="bg-gray-500">HIT ME BABY</button> in the App.vue file
`
Tried Solutions:
Add .native: <button #click.native="console.log('PRESSED')" class="bg-gray-500">GENERATE TEXT</button>
The usual way of using a console.log is by using a function to call it (rather than doing it directly from the template), like the following.
Using the CompositionAPI:
<script setup>
function consoleHitOn() {
console.log('I got hit on')
}
</script>
<template>
<button #click="consoleHitOn">HIT ME BABY</button>
</template>
Using the OptionsAPI, you could achieve the same with a hack by doing this
<script>
export default {
computed: {
console: () => console,
}
}
</script>
<template>
<button #click="console.log('I got hit on')">HIT ME BABY</button>
</template>
I'm not sure if there is a way of writing the same kind of hack with CompositionAPI, but even if there is I do not really recommend it anyway.
PS: one thing for sure is that it's totally not related to TailwindCSS.
Tailwind is for the style, nothing concerning the event listeners in a Vue app.
I updated my machine, turned it off, tried again today and it worked.
I have no further explanation...
Below command fixed issue at my end.
just npm run build when its build successfully do npm run dev it might fix your issue it worked at my end,
when I run build I found few issues, fixed them and run again dev
I'm trying to use a Bootstrap theme in my Vue application. Unfortunately the Bootstrap theme has no reference implementation for Vue. So I need to configure everything on my own.
What I want to do is, I want use the scss-files provided by the theme in Vue. So my App.vue component is pretty simple:
<template>
<div id="app">
</div>
</template>
<style lang="scss">
#import "#/assets/base.scss";
</style>
The "base.scss" file contains imports all dependencies. So, when I run my Vue application using "npm run serve", I get the following error:
ERROR Failed to compile with 10 errors
This dependency was not found:
-!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!typicons.font/src/font/typicons.css
in ./node_modules/cs
s-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist /cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
To install it, you can run: npm install --save
-!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!typicons.fo
nt/src/font/typicons.css
These relative modules were not found:
./components/icons/linearicons/Linearicons-Free.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/
sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/icons/linearicons/Linearicons-Free.eot?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo
dules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/icons/linearicons/Linearicons-Free.svg?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo
dules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/icons/linearicons/Linearicons-Free.ttf?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo
dules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/icons/linearicons/Linearicons-Free.woff2?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_
modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/icons/linearicons/Linearicons-Free.woff?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_m
odules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./components/slick-carousel/slick/ajax-loader.gif in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sa
ss-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./utils/images/logo-inverse.png in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs
.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
./utils/images/logo.png in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref
--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&lang=scss&
Error from chokidar (C:): Error: EBUSY: resource busy or locked,
lstat 'C:\hiberfil.sys'
The referenced files are exist in the "#/assets/components/..." directory. But my problem is that I've no idea how I can set a relative path (e.g. "#/assets") searchs for the components. Furthermore there's no variable in the "base.scss" file I can adjust to set the relativ path. I also don't want modify the "base.scss" file because it comes from the theme.
I've no idea how to fix it this. I already tried to set the corresponding webpack-chain in vue.config.js without any success:
module.exports = {
chainWebpack: config => {
config.module
.rule('fonts')
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use('file-loader')
.loader('file-loader')
.tap(options => {
options = {
name: '#/assets/[path][name].[ext]'
}
return options
})
.end()
}
I hope anyone can help solving this problem :-)
I finally solved the issue by simply importing the "base.scss" in the "main.js" file and use it:
import theme from '#/assets/base.scss'
Vue.use(theme)
Super basic question: I want to install and use the Leaflet module in my Sails.js project. First thing, I install it in using npm i leaflet --save. This successfully updates the dependencies list in the package.json file.
To use it, I write the following code inside a page script:
mounted: async function() {
//…
console.log('hello world!!!!');
var leaflet = require("leaflet");
},
Sails.js complains: Uncaught (in promise) ReferenceError: require is not defined.
Why? If I need to create a hook first, what would it need to contain?
Modules installed through the package manager npm are to be used in the server-side of things (controllers, actions, etc.), not in the browser.
You could use solutions such as Browserify or Webpack, but in this case it's just better to download Leaflet from the website and add the folder under assets/dependencies.
Finally, you can import the JavaScript Leaflet files in layout.ejs (inside the views/layouts folder):
<% /* Auto-injected «script» tags: */ %>
<!--SCRIPTS-->
// ...
<script src="/dependencies/leaflet/leaflet.css"></script>
And for CSS:
<% /* Auto-injected «link» tags: */ %>
<!--STYLES-->
// ...
<link rel="stylesheet" href="/dependencies/leaflet/leaflet.css">
I would guess this is the best approach as the Sails.js starter template is importing Boostrap 4 in the same way.
You don't have to require anything, once you npm installed it just add the leaflet.js, leaflet.markercluster.js and leaflet.css in your header and you're done.
You can use the short example of init map from their site and it'll work.
I started creating a project in vue.js based on this one:
https://github.com/creativetimofficial/vuetify-material-dashboard
When trying to integrate TableList.vue component, I get an error:
Unknown custom element: <material-card> - did you register the component correctly?
Vue.js project was created using webstorm. I copied over styles folder and enabled watcher to compile scss files into css. I run project using npm serve command in WebStorm.
My App.vue looks a little different like this:
<template>
<v-app>
<TheBar />
<TheNavigationDrawer />
<TheView />
</v-app>
</template>
<script>
import TheBar from '#/components/core/TheBar.vue'
import TheNavigationDrawer from "#/components/core/TheNavigationDrawer";
import TheView from '#/components/core/TheView.vue'
export default {
name: 'app',
components: {
TheBar,
TheNavigationDrawer,
TheView
},
data: () => ({
}),
};
</script>
<style lang="scss">
#import './styles/index.scss';
</style>
As you can see I am importing the full file, which in turn imports _cards.scss file which should have definition of material-card component. Is this how it works?
I tried registering component manually by adding material-card to components property but it fails to parse kebab-case properly because of '-' sign.
What also intrigues me is that the original creator NEVER registers material-card component so how the hell does his TableList.vue component know it?
I also found this guide - https://medium.com/#mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9. However I don't see a webpack.config.js file anywhere, where is this?
Any help is greatly appreciated. :D
There are multiple ways of importing components into your Vue instance. For the case of the project you're working from, the vuetify library is imported at the root instance which allows all components to be available globally. This means you don't need to import the desired components within specific .vue files.
It's likely that you haven't installed all of the dependencies correctly. Or you have not properly imported these dependencies within main.js. Check that these dependecies (found in package.json) have been installed by running npm list.
I built my custom CKEditor5 from classic edition.
git clone -b stable https://github.com/my/forked/repo
cd ckeditor5
npm install
npm run build
In my VUE2 project's main.js
import 'path/to/ckeditor5/build/editor.js'
Vue.prototype.editor = window.ClassicEditor
In my component
<template>
<div class="root">
<div class="editor></div>
</div>
</template>
<script>
export default{
mounted(){
var vm = this;
var ClassicEditor = vm.ClassicEditor;
ClassicEditor.create(vm.$el.querySelector('.editor'))
}
}
</script>
I got error when ClassicEditor.create(...):
Uncaught (in promise) TypeError: Cannot read property '0' of undefined
at Object.to (ckeditor.js?ccdb:44)
at new ea (ckeditor.js?ccdb:342)
at new Ac (ckeditor.js?ccdb:479)
at new Bc (ckeditor.js?ccdb:504)
at Eg.qc (ckeditor.js?ccdb:20)
at Eg.Vl (ckeditor.js?ccdb:20)
at new Eg (ckeditor.js?ccdb:20)
at eval (ckeditor.js?ccdb:20)
at new Promise (<anonymous>)
at Function.create (ckeditor.js?ccdb:20)
I can get the div.editor element but show the error when create editor.
This error comes from the incorrect Babel transpilation. It's tracked on both Babel side and CKEditor 5 side and hopefully will be fixed soon. We've heard about similar problems in our React integration.
https://github.com/babel/babel/issues/8913
https://github.com/facebook/create-react-app/issues/5387
https://github.com/ckeditor/ckeditor5-react/issues/41#issuecomment-428716100
I'd recommend to change the build process and to use an older version of babel for now. Or to do not transpile the code.