iliyazelenko / tiptap-vuetify-nuxt Goto Github PK

View Code? Open in Web Editor NEW

28.0 2.0 3.0 1015 KB

Integration tiptap-vuetify (editor) with Nuxt.

Vue 48.34% JavaScript 51.66%

tiptap-vuetify-nuxt's Introduction

tiptap-vuetify with Nuxt

Play on Codesanbox: https://codesandbox.io/s/github/iliyaZelenko/tiptap-vuetify-nuxt/tree/master/

Important parts

Transpile

It is important to specify transpile (link to code below).

build: {
  transpile: ['vuetify/lib', 'tiptap-vuetify']
}

Load icons

I put links to icon styles in link array, most likely you only need your kind of icons and you can load the icons in a different way, not like below (link to code below).

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  // Iconfonts for Vuetify. You need to leave only which one you use
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' },
  { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' },
  { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.4.95/css/materialdesignicons.min.css' }
]

Plugin

It can be seen that I created and connected the plugin.

import Vue from 'vue'
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
import 'tiptap-vuetify/dist/main.css'

export default ({ app }) => {
  Vue.use(TiptapVuetifyPlugin, {
    // Below is an IMPORTANT line.
    vuetify: app.vuetify,
    iconsGroup: 'mdi'
  })
}

And include it (nuxt.config.js):

plugins: [
  { src: '~/plugins/TiptapVuetify', mode: 'client' }
],

Vuetify object (new Vuetify(opts)) is in app.vuetify because of @nuxtjs/vuetify module, if you do not use @nuxtjs/vuetify and initialize Vuetify yourself, then do not forget to pass the Vuetify object as in the code above. You can read more on Vuetify's docs.

About Nuxt's plugins documentation here.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

tiptap-vuetify-nuxt's People

Contributors

Stargazers

Watchers

Forkers

alexeyzelenko sinzaa-creator lgtm-migrator

tiptap-vuetify-nuxt's Issues

Menu bubble?

Nice work.. and almost all we need. Question is how to use the modern menu-bubble instead of ordinary menu bar?

Help Needed - Question - How to show the loaded content to users?

Hi,

This might be a basic question, but i am little puzzled.

Lat's say i created a blog post content using this package.

Now how do i show this content on the single post page which is visible to end users.

do I use <div v-html="MyPostContent"> Vue/Nuxt warns us about not to use v-html. SO just wanted to know how do we actually show this data after posting.

Font size shrinks after installing module

Hey there after installed the module and loaded the config into nuxt.config.js my font size has decreased. If I remove the module and config it's back to normal

Using Nuxt: Module parse failed: Unexpected token

getting error
Module parse failed: Unexpected token (4925:17)
You may need an appropriate loader to handle this file type.
| render(h, context) {
| const data = {
| props: { ...context.props,
| name
| },
whenever I try to build

Compiling Error

I keep getting this error after following your steps. Any Advice on how to solve this?

This relative module was not found: friendly-errors 11:21:53
friendly-errors 11:21:53

../components/Editor in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/create-cnote/index.vue?vue&type=script&lang=js& friendly-errors 11:21:53

Cannot read property 'install' of undefined.

Using nuxt 2.11.0 issue's start with this plugin. Locally whenever i do npm run dev it ends up in Cannot read property 'install' of undefined
I tried your example and changed nuxt to the latest version and that seems to be in some sort of bootloop now:

https://codesandbox.io/s/nuxt-tiptap-vuetify-03hzi

Demo Config doesnt work in Nuxt >v2.9 using buildModules

My nuxt version is 2.15.3 and when I try to load a page with tiptap I get:

ERROR [Vue warn]: Error in data(): "TypeError: components_Editor__WEBPACK_IMPORTED_MODULE_1_.default is not a constructor"

How can I setup tiptap-vuetify when @nuxtjs/vuetify is build in buildModules instead of modules?

nuxt.config.js

    buildModules: [
        // https://go.nuxtjs.dev/eslint
        '@nuxtjs/eslint-module',
        // https://go.nuxtjs.dev/vuetify
        '@nuxtjs/vuetify',
    ],
    build: {
        extend(config, { isClient, isDev }) {
            if (isClient) {
                config.devtool = isDev ? '#source-map' : '';
            } else config.devtool = isDev ? 'inline-source-map' : '';
        },
        transpile: ['vuetify/lib', 'tiptap-vuetify'],
    },
```

I am looking for image upload option in toolbar. Do you have any working example of image upload?

Thanks