Cannot load f7 text editor on Vue

I recently installed framework7 vue, I want to use text editor for my website.
I followed the instructions on installation on the docs.

Here is what I have included on my main.js.

import Framework7 from ‘framework7/lite’;
import Framework7Vue, { f7, f7Page, f7Navbar, f7Block, f7TextEditor } from ‘framework7-vue’;

app.component(‘f7-text-editor’, f7TextEditor);

and I’m trying to use the text editor component on my vue component the code is shown below, there is no error shown on the console, but when I tried to run there is nothing shown on the screen, I wonder if I have implemented the css correctly. I used inspector on my browser and there is a div text-editor class but there are no elements inside. What am I missing? I’m using the framework7 version 8.3.3, please help me fix this. Thanks in advance.

import { f7Page, f7TextEditor } from "framework7-vue"; import { ref } from "vue"; export default { components: { f7Page, f7TextEditor, } }