I am trying to use CKEditor with vue 3 composition api locally but the editor not shown on the page
here is may component
<template>
<PageWrapper title="Post">
<CKEditor :editor="editor"></CKEditor>
</PageWrapper>
</template>
<script setup>
import PageWrapper from '#/components/PageWrapper.vue'
import CKEditor from '#ckeditor/ckeditor5-vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
const editor = ClassicEditor
</script>
What's wrong?
From the official documentation it's pretty straightforward, using script setup, i found it working this way
import CKEditor from '#ckeditor/ckeditor5-vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
const editor = ClassicEditor
const ckeditor = CKEditor.component
then you can use the component in the template properly.
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import {reactive} from 'vue'
export default {
setup() {
let editor = reactive(ClassicEditor);
return {editor}
}
}
Related
I am moving my project dependencies from Vue CLI to Vite. I have to use Vue.js 2.7 at the moment and I cannot upgrade to Vue.js 3 yet.
I used vue-svg-loader with Vue CLI previously and I am trying to use vite-svg-loader now. It looks like vite-svg-loader supports Vue.js 3 only.
Is there a different way to import SVG files with Vite & Vue.js 2.7? I have many of them and I will not be able to replace them with .vue components.
This is how I import and use SVG files in my components:
<template>
<div>
<my-icon/>
</div>
</template>
<script>
import MyIcon from "#some_path/my-icon.svg";
export default {
components: {
MyIcon
}
};
</script>
Vite doesn't treat these SVG files as Vue components. Instead, it treats them as static assets and creates something like assets/my-icon.7f263221.svg.
I've encountered the same problem, https://www.npmjs.com/package/vite-plugin-vue2-svg
// vite.config.ts
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; // vue2 plugin
import { createSvgPlugin } from "vite-plugin-vue2-svg";
export default defineConfig({
plugins: [createVuePlugin(), createSvgPlugin()],
});
<!-- App.vue -->
<template>
<Icon />
</template>
<script>
import Icon from "./icon.svg";
export default {
components: {
Icon,
},
};
</script>
I'm building a component library that uses the v-tooltip plugin. So I need to install and use the plugin in the component itself instead using it globally with app.use().
I've read so many posts, and what I've tried so far doesn't work for my case.
I know that I can access the app in the Composition API as:
import VTooltip from 'v-tooltip';
import 'v-tooltip/dist/v-tooltip.css';
const App = getCurrentInstance().appContext.app;
App.use(VTooltip);
but that doesn't work, and I get this warning:
[Vue warn]: Component is missing template or render function.
Any help would be greatly appreciated.
to use this plugin in the component itself, you can try to do something like this:
<template>
<button v-tooltip="/* your code */"> Custom button </button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import VTooltip from "v-tooltip";
export default defineComponent({
directives: {
tooltip: VTooltip.VTooltip,
"close-popover": VTooltip.VClosePopover,
"v-popover": VTooltip.VPopover,
},
});
</script>
Thanks #Rago, you gave me an idea with the directives. The solution was really simple in this case... At the moment v-tooltip is undergoing a package rename (to floating-vue), so with the new plugin you can decide if you want to use a component or a directive.
This is the solution:
<template>
...
<span v-tooltip="help" class="form-help">?</span>
...
</template>
<script>
import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';
export default defineComponent({
directives: {
tooltip: VTooltip,
},
...
});
</script>
And for the Composition API you just import it, and Vue will automatically detect the directive if you follow the naming convention - putting v in front of the directive:
import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';
const vTooltip = VTooltip;
I need to add Vuetify Data Table to my existing Vuejs project. So when we add vue add vuetify its installed globally. Please help me for that how doing it
Thanks
You can import the dataTable component alone.
You can do this in a vuetify.js file:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify, {
VDataTable,
} from 'vuetify/lib'
Vue.use(Vuetify, {
components: {
VDataTable,
},
})
const opts = {}
export default new Vuetify(opts)
and in your main.js import this file: import vuetify from #/src/plugins/vuetify.js
or you can import it in the component you need it:
<!-- Vue Component -->
<template>
<v-card>
<v-card-title>...</v-card-title>
<v-card-text>...</v-card-text>
</v-card>
</template>
<script>
import { VDataTable } from 'vuetify/lib'
export default {
components: {
VDataTable,
}
}
</script>
you can read more about this in vuetify docs
(Vue version - 2, Vuetify and Storybook - latest)
Consider the following simple button component:
<template>
<v-btn round
color="primary">
<slot></slot>
</v-btn>
</template>
<script>
export default {
name: "test-button",
}
</script>
In the App component file, it is invoked like this:
<v-app>
<v-layout column justify-center>
<v-layout row justify-center align-center>
<test-button #click="testBtnClicked">
Click It
</test-button>
</v-layout>
</v-layout>
</v-app>
And the Vuetify setup looks like this in the main.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base,
info: colors.blue.lighten2,
accent: colors.green.lighten1,
error: colors.red.darken2
}
});
So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.
Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:
import { storiesOf } from "#storybook/vue";
import TestButton from "./TestButton.vue";
storiesOf("TestButton", module)
.add("button template", () => ({
template: '<test-button :rounded="true">round</test-button>',
components: {TestButton}
}))
This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.
I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.
Here's my webpack.config.js (in .storybook):
module.exports = (baseConfig, env, defaultConfig) => {
defaultConfig.plugins.push(new VueLoaderPlugin());
return defaultConfig;
};
I have the problem too.
After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.
So, I think the problem is not linked to storybook, but vuetify instead.
By wrapping the component I wish to test with a v-app, it's ok.
So, for now, please try to add a decorator in your config.js like this :
import { configure, addDecorator } from '#storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
// your colors
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
...
Sounds ok for you ?
(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)
I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.
// #### /.storybook/config.js
import { configure } from '#storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '#/plugins/allPlugins';
// Install Vue plugins.
Vue.use(Vuex);
const req = require.context('../src', true, /\.stories\.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
plugins/allPlugins
import Vue from 'vue'; // <---- important
import './vuetify'; // <---- important
import WebCam from 'vue-web-cam';
import Chat from '#/libs/vue-beautiful-chat/index';
import './styles';
import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);
plugins/vuetify
import Vue from 'vue';
import {
Vuetify,
VApp,
...
} from 'vuetify';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
components: {
VApp,
...
},
theme: {
primary: colors.blue.lighten1,
...
},
});
The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.
Im trying to use this library: https://github.com/rigor789/vue-scrollto
But Im having trouble using it and the instructions are not very helpful to me. it says I should do this:
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
But I have no idea where to do this. So I have tried just using it like this:
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
But that doesn't work. So how do I import libraries properly so I can use the directives?
Try to use import instead of using require.
The es6 script will be transpiled to old js versions when you build the app.
<template>
<div>
<Navbar/>
<Cover/>
<button class="btn btn-primary" v-scroll-to="'#about'">Hallo</button>
<Offers/>
<AboutUs id="about"/>
<Info/>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Cover from '#/components/main/Cover'
import Offers from '#/components/main/Offer/Offers'
import AboutUs from '#/components/main/AboutUs'
import Info from '#/components/main/Info'
import Menu from '#/components/main/menu/Menu'
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo)
export default {
components: {
Navbar,
Cover,
Offers,
AboutUs,
Info,
Menu
}
}
</script>
So bacause I use Vue it did the following:
create a new file called nuxt-scroll-to.js in the plugins folder with this code:
import Vue from 'vue';
import VueScrollTo from 'vue-scrollto/vue-scrollto.js';
Vue.use(VueScrollTo)
and the in the nuxt.config.js array add this code: { src: '~/plugins/nuxt-scroll-to.js', ssr: false },