Integrate Froala in nuxt 3

[RodriguezTheo]

Hello,

I trying to ingrate froala in nuxt 3 app but it dont works...

// froala-plugin.client.ts

import 'froala-editor/js/plugins.pkgd.min.js';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/froala_style.min.css';

import VueFroala from 'vue-froala-wysiwyg/dist/vue-froala.js';

export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.vueApp.use(VueFroala, {})
});

// modules/froala.ts

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit';

export default defineNuxtModule({
    meta: {
        name: 'froala',
        configKey: 'froala',
        compatibility: {
            nuxt: '>=3.0.0'
        }
    },
    setup(options, nuxt) {
        // Add Froala plugin
        const resolver = createResolver(import.meta.url)
        addPlugin({
            src: resolver.resolve('../plugins/froala-plugin.client.ts'),
            mode: 'client'
        });

    }
});





// vue component
<script setup lang="ts">
const editorConfig = ref({
  events: {
    initialized: function () {
      console.log("Froala Editor initialized");
    }
  },
  heightMin: 100,
  key: 'YNB3fH3A7B7B7E5E3F2C-8zE2A5jqdE5ixnA3oD-16e1mD6F5F4G4E1A9D7C3B4E4==',
});


const model = ref( '<i>Edit Your Content Here!</i>')
</script>

<template>
  <froala id="edit" v-model:value="model"></froala>
</template>

<style scoped>
#froala-editor {
  margin: 20px;
}
</style>

Thanks a lot for help :)

[mw-shublaq]

did you reach out for any solution?