Add Vue integration docs

[jacekbogdanski]

Important

Before merging this PR we need to update package.json file with published ckeditor4-vue npm package. Currently, it uses a dev repository with the post-install script for development purposes. So, instead of:

ckeditor4-docs/package.json

Line 26 in 76aeec5

"ckeditor4-vue": "https://github.com/ckeditor/ckeditor4-vue#develop",

ckeditor4-docs/package.json

Line 68 in 76aeec5

"postinstall": "cd node_modules/ckeditor4-vue && npm i && npm run build",

we should have:

"ckeditor4-vue": "0.0.1"

Closes ckeditor/ckeditor4-vue#7.
Closes ckeditor/ckeditor4#3774.

[f1ames]

Looks quite nice 👍

Some polishing needed and few questions:

I had some npm i issue due to package-lock.json file:

so I'm not sure if we should push it? Also do we need:

docs/sdk/examples/assets/vue/main.js
docs/sdk/examples/assets/vue/main.js.map

shouldn't those be added during docs build process? Because theses are just Vue integration dist files?

And when switching to NPM package we will get rid of scripts/integrations/vue/webpack.config.js right?

---

The installation section should be updated:

and the Integrations on the main page too:

---

Something strange with the sample menu styling going on (Chrome 79 on Linux Mint 19.2, FF seems to be working fine) 🤔

Seems to be happening for smaller resolution:

---

Can we also polish the styling of this example:

I know w e have the same for React but it looks quite cramped.

[jacekbogdanski]

I had some npm i issue due to package-lock.json file:

I can't reproduce it. Maybe it's not related to PR changes?

Also do we need:
docs/sdk/examples/assets/vue/main.js
docs/sdk/examples/assets/vue/main.js.map

We don't. I forgot to update .gitignore for these files.

And when switching to NPM package we will get rid of scripts/integrations/vue/webpack.config.js right?

Not really. It's building sample code, not integration. You can see the same approach with React and Angular sample apps.

Something strange with the sample menu styling going on (Chrome 79 on Linux Mint 19.2, FF seems to be working fine) thinking

Seems like Vue treats HTML standards very seriously and doesn't trim empty spaces between list tags like it's done in HTML specification: vuejs/vue#7701

Can we also polish the styling of this example:

Honestly, it looks fine for me, but I don't mind updating it. However, maybe it makes more sense to extract it as a separate issue, so we can unify examples between Vue, React and Angular? Otherwise, we will end up with 3 different samples sharing a lot of similarities instead of a standardized approach.

[f1ames]

LGTM, it went pretty smooth 👍 No we need a final review from @AnnaTomanek 🙏 

---

Honestly, it looks fine for me, but I don't mind updating it. However, maybe it makes more sense to extract it as a separate issue, so we can unify examples between Vue, React and Angular? Otherwise, we will end up with 3 different samples sharing a lot of similarities instead of a standardized approach.

Makes sense, can you extract it @jacekbogdanski?

I had some npm i issue due to package-lock.json file:

I can't reproduce it. Maybe it's not related to PR changes?

Seems to be working fine now 🤔 🤞

[f1ames]

Rebased onto latest stable.

[f1ames]

WARNING: Before merging this PR we need to update package.json file with published ckeditor4-vue npm package (see #283 (comment)).

☝️ Means it could be merged only after NPM package is published and should be done after Vue package release (by @f1ames or @jacekbogdanski).

[AnnaTomanek]

I added some minor fixes but overall, great job @jacekbogdanski 👏 ! All fine by me.

[f1ames]

Rebased onto latest stable.