Tools not work

[olddeda]

<editor header list code ... :config="config"/>

no header tool

[FarzadMohtasham]

I have the same issue! https://github.com/ChangJoo-Park/vue-editor-js/issues/64

[kc980602]

#64 (comment)

[moulikrishna]

Tools not working, please help how to fix this

<template>
  <div>
    <h1>Demo</h1>
    <Editor
      ref="editor"
      :config="config"
      personality
    />
  </div>
</template>
<script>
import { Editor } from 'vue-editor-js';
export default {
    components: {
        Editor
    },
    data () {
        return {
            config: {
                personality: {
                    endpoints: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'
                }
            },
        };
    },
};
</script>

[kc980602]

1. run npm i --save-dev @editorjs/personality

<template>
  <div>
    <h1>Demo</h1>
    <Editor
      ref="editor"
      :config="config"
      personality
    />
  </div>
</template>
<script>
import { Editor } from 'vue-editor-js';
import Personality from '@editorjs/personality'

export default {
    components: {
        Editor
    },
    data () {
        return {
            config: {
                tools: {
                  personality: {
                       class: Personality,
                       config: {
                           endpoint: 'http://localhost:8008/uploadFile'  // Your backend file uploader endpoint
                      }
                 }
          }
  }
            },
        };
    },
};
</script>

[moulikrishna]

1. run npm i --save-dev @editorjs/personality

<template>
  <div>
    <h1>Demo</h1>
    <Editor
      ref="editor"
      :config="config"
      personality
    />
  </div>
</template>
<script>
import { Editor } from 'vue-editor-js';
import Personality from '@editorjs/personality'

export default {
    components: {
        Editor
    },
    data () {
        return {
            config: {
                tools: {
                  personality: {
                       class: Personality,
                       config: {
                           endpoint: 'http://localhost:8008/uploadFile'  // Your backend file uploader endpoint
                      }
                 }
          }
  }
            },
        };
    },
};
</script>

Thanks for the quick response.
Tried this code, it is not working for me

Tried with the header option also, it is not showing anything can you please check anything wrong with this code

<template>
  <div>
    <h1>Demo</h1>
    <Editor
      ref="editor"
      :config="config"
      header
    />
  </div>
</template>
<script>
import { Editor } from 'vue-editor-js';
import Header from '@editorjs/header';
export default {
    components: {
        Editor
    },
    data () {
        return {
            config: {
                tools: {
                    header: {
                        class: Header,
                        config: {
                            placeholder: 'Enter a header',
                            levels: [ 2, 3, 4 ],
                            defaultLevel: 3
                        }
                    }
                }
            }
        }
    }
}
</script>

[kc980602]

Tested you code, it works for me, not sure what's your problem...

did you installed the package?
what's your package.json looks like?
any error log from the console?

[moulikrishna]

Tested you code, it works for me, not sure what's your problem...

did you installed the package?
what's your package.json looks like?
any error log from the console?

{
"name": "vue-2-webpack-4-boilerplate",
"version": "1.0.0",
"description": "Vue 2 application with webpack 4 boilerplate",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"staging": "cross-env NODE_ENV=staging webpack",
"build": "cross-env NODE_ENV=production webpack"
},
"repository": {
"type": "git",
"url": "https://github.com/samteb/vue-2-webpack-4-boilerplate"
},
"keywords": [
"Vue",
"Webpack 4"
],
"author": "samteb [email protected]",
"license": "MIT",
"homepage": "https://github.com/samteb/vue-2-webpack-4-boilerplate",
"dependencies": {
"@babel/polyfill": "~7.2",
"@editorjs/header": "^2.6.0",
"@vue/composition-api": "^1.0.0-beta.15",
"vue": "~2.6",
"vue-editor-js": "^2.0.1",
"vue-router": "~3.0"
},
"devDependencies": {
"@babel/core": "~7.2",
"@babel/plugin-proposal-class-properties": "~7.3",
"@babel/plugin-proposal-decorators": "~7.3",
"@babel/plugin-proposal-json-strings": "~7.2",
"@babel/plugin-syntax-dynamic-import": "~7.2",
"@babel/plugin-syntax-import-meta": "~7.2",
"@babel/preset-env": "~7.3",
"@editorjs/personality": "^2.0.2",
"babel-eslint": "~10.0",
"babel-loader": "~8.0",
"compression-webpack-plugin": "~2.0",
"cross-env": "~5.2",
"css-loader": "~2.1",
"eslint": "~5.16",
"eslint-config-standard": "~10.2",
"eslint-friendly-formatter": "~3.0",
"eslint-loader": "~2.1",
"eslint-plugin-html": "~3.0",
"eslint-plugin-import": "~2.14",
"eslint-plugin-node": "~4.2",
"eslint-plugin-promise": "~3.5",
"eslint-plugin-standard": "~3.0",
"eslint-plugin-vue": "~5.1",
"friendly-errors-webpack-plugin": "~1.7",
"html-webpack-plugin": "~3.2",
"mini-css-extract-plugin": "~0.5",
"node-sass": "~4.12",
"optimize-css-assets-webpack-plugin": "~5.0",
"sass-loader": "~7.1",
"uglifyjs-webpack-plugin": "~1.2",
"vue-loader": "~15.6",
"vue-style-loader": "~4.1",
"vue-template-compiler": "~2.6",
"webpack": "~4.29",
"webpack-bundle-analyzer": "~3.3",
"webpack-cli": "~3.2",
"webpack-dev-server": "~3.1",
"webpack-hot-middleware": "~2.24",
"webpack-merge": "~4.2"
}
}

My main.js

// Import Vue
import Vue from 'vue';
// import VueCompositionApi from '@vue/composition-api';
// Vue.use(VueCompositionApi);
import VueRouter from 'vue-router';
// Import Vue App, routes, store
import App from './App';
import routes from './routes';

Vue.use(VueRouter);

// Configure router
const router = new VueRouter({
    routes,
    linkActiveClass: 'active',
    mode: 'history'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

No errors in the console

Output look like this

[kc980602]

perhaps try change to the following
import Editor from 'vue-editor-js'

[moulikrishna]

perhaps try change to the following
import Editor from 'vue-editor-js'

After change
import Editor from 'vue-editor-js'
import Header from '@editorjs/header';

Error in console