feat: Vue 3 Support #997

crutch12 · 2020-10-13T13:54:00Z

To compile vue3 template we have to use @vue/compiler-sfc (because vue-template-compiler is for vue2 only).

I think this is an issue that should be fixed in vue-cli-plugin-vue-next by not including vue-template-compiler (which is for 2.x only)

So we have to replace parseComponent(...) from vue-template-compiler with parse(...).descriptor from @vue/compiler-sfc

Here:

vue-styleguidist/packages/vue-styleguidist/src/loaders/utils/parseVue.ts

Line 14 in 69c848b

output = compiler.parseComponent(source)
vue-styleguidist/packages/vue-styleguidist/src/loaders/utils/getScript.ts

Line 7 in daf0432

const parts = parseComponent(code)
vue-styleguidist/packages/vue-styleguidist/src/loaders/utils/processComponent.ts

Line 44 in f5b70bf

const customBlocks = parseComponent(fs.readFileSync(filepath, 'utf8')).customBlocks

The text was updated successfully, but these errors were encountered:

elevatebart · 2020-10-13T14:02:06Z

You are absolutely right, thanks for the recommendation.

It might not be enough. I will track the vue 3 compatibility work on this issue.

elevatebart · 2020-10-13T19:20:12Z

As expected, the rewiring of the compiler was not enough.
Since Vue apps have a very different root in v2 and v3, this file needs to be re-wired.
https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/packages/vue-styleguidist/src/client/utils/globalizeComponent.ts

This is how we do it in vue 3.
https://dev.to/jakedohm_34/registering-global-components-with-vue-3-2kgl

It would mean having one vue app per example block.
In each vue app, all components would be registered again.

elevatebart · 2020-10-13T20:26:34Z

For the reasons above vue 3 compatibility means breaking changes in the way we use renderRootJsx.
Breaking changes mean a major version.

I suggest we use the "next" branch and the "@next" channel to deliver vue 3 compat.

elevatebart · 2020-10-14T20:11:44Z

I hit a snag last time I tried which is I have to abandon TypeScript completely if I am to adopt vue 3.
Indeed, the TSX typings of vue 3 conflict with React's typings so one cannot have them both installed at the same time.

crutch12 · 2020-10-14T20:26:20Z

Classical TypeScript :/

elevatebart · 2020-10-17T20:25:39Z

To be fair to TypeScript, that is classic Facebook/React.
TSX was made with the Facebook motto in mind: "Go fast and break things" pushing them to add the TSX typings as ambient, not caring about anyone that would need another version of these typings (like Vue or Svelte)

crutch12 · 2020-10-22T15:23:30Z

What can we do now?

elevatebart · 2020-10-22T17:02:36Z

Hello @crutch12

I removed all TypeScript from the vue3 branch. I see your point.
Then I have to remove all tests because @testing-library/react imports react types which makes babel fail.

I was OK with no TypeScript until it is fixed but no tests at all, that's a bummer.
I have an issue posted on vue-next and a PR that goes with it.

Now, we wait.

spaceemotion · 2020-11-24T22:15:06Z

@elevatebart Are we still waiting on vuejs/core#1033? You said you would have some time on VueLand, did you manage to have an idea on how to approach this?

elevatebart · 2020-11-24T23:28:16Z

Hello @spaceemotion

I found a solution that works and have not delivered it.

going to vue3 is a deep breaking change, so I would like to use this opportunity to add breaking changes that have been asked for a long time. You can find a list of these changes in Next build vue3 #1002
The idea of removing all unit tests and all types from vue-styleguidist is not acceptable to me. So, for now, we are still waiting.

If you are documenting your components in the style of vue-styleguidist, you still have options:

vue-docgen-api is already compatible with vue3. It does not detect everything but it works. I am very eager to get feedback with it.
Use vue-docgen-cli generates markdown files that can be consumed by any static site generator.
Complete it with vue-live@next for live examples and you can build your own vue 3 compatible tool

I hope this helps.

spaceemotion · 2020-11-25T10:42:03Z

Thanks for the tip! I only wanted to use vue-docgen-api anyways so that was perfect timing.

I incorporated it into a custom rollup plugin and it worked without any problems 🎉 (.vue files lang=typescript).

Will keep you posted while I explore the options/annotations 👍

spaceemotion · 2020-11-25T16:01:59Z

Alright, not sure if I should open up a new issue for this, but I just tried the following and it doesn't pick up the displayName or description (props work fine though):

// (do something up here with "typeof component")

/**
 * Buttons allow users to perform an action or to navigate to another page.
 * They have multiple styles for various needs, and are ideal for calling attention
 * to where a user needs to do something in order to move forward in a flow.
 *
 * @displayName Button
 * @group Form Elements
 */
const component = defineComponent({
  name: "DsButton",
  props: {},
});

export default component;

Gives me:

{
  "displayName": "DsButton",
  "exportName": "default",
  "description": "",
  "tags": {},
  "props": [],
  "slots": [
    {
      "name": "default"
    }
  ]
}

elevatebart · 2020-11-25T18:41:08Z

There is an issue common to vue 2 if you assign the output instead of exporting it directly...
Let me fix this really quick..

In the meantime, this should work though.

/**
 * Buttons allow users to perform an action or to navigate to another page.
 * They have multiple styles for various needs, and are ideal for calling attention
 * to where a user needs to do something in order to move forward in a flow.
 *
 * @displayName Button
 * @group Form Elements
 */
export default defineComponent({
  name: "DsButton",
  props: {},
});

also valid for vue 3 defineComponent cc #997

Keyes · 2021-02-24T19:03:00Z

Any news on Vue3 support so far? I enjoy using styleguidist way more than storybook for example, but it feels weird starting a new project now with Vue2 only because of that... :/

elevatebart · 2021-02-24T20:04:13Z

@Keyes thanks for the kind words.

I am a bit swamped right now but it's moving. checkout the progress on the Pull Requests marked with the label next major

My plan is to support Vue3 in the next major version. I should be starting to work on it in March, for a release at the beginning of summer.

No more support for Vue 2
Use of typescript in examples
Monaco as the editor with an option to get back to the prism editor if you need lighter sites.
And hopefully sass compilation in SFC

mambari · 2021-05-09T08:42:40Z

Hi @elevatebart
Thank you for your work.
Any news on Vue3 support (even beta that we can test) ?
Best regards,

dvh91 · 2022-01-18T17:58:24Z

@elevatebart Thanks! withDefaults indeed working great! Can you maybe assist with this one?

shadow7412 · 2022-03-11T04:34:19Z

Should this still work with Vue 2? Or is there a specific version I should target for projects that haven't been updated yet?

elevatebart · 2022-03-12T02:03:36Z

@shadow7412 It is unit-tested with vue2 (still) so everything should work with vue 2 and not vue 3.

Do you have any issue with a vue 2 project ?

shadow7412 · 2022-03-12T04:28:31Z

I was getting an error that had something to do with vue sfcs. From memory it might have been unable to find @vue/compiler-sfcs... But I won't be able to get the exact errors until I get back to work on Tuesday.

shadow7412 · 2022-03-15T03:03:59Z

@elevatebart sorry about the delay.

My current error when attempting to build for a Vue 2 project is Error: Cannot find module 'vue/compiler-sfc'. Attempting to run npm install vue/compiler-sfc directs me to log into github, then fails (I assume based on this it's a private package?).

My vue is at 2.6.14, and vue-styleguidist is at 4.44.18 in case that helps.

bodograumann · 2022-03-15T06:01:19Z

@shadow7412 It should be @vue/compiler-sfc. Notice the @ at the front.

shadow7412 · 2022-03-15T07:22:11Z

@shadow7412 It should be @vue/compiler-sfc. Notice the @ at the front.

In the npm command, the import, or both?

fallsimply · 2022-03-15T18:35:25Z

Both. The vue/compiler-sfc import was introduced in Vue 3

@shadow7412 It should be @vue/compiler-sfc. Notice the @ at the front.

In the npm command, the import, or both?

elevatebart · 2022-03-15T23:44:12Z

And this is the package I use in docgen, to parse the sfc

shadow7412 · 2022-03-16T23:11:03Z

Does that mean it should be listed as a dependency, assuming it was introduced in vue 3 and not backported?

elevatebart · 2022-03-17T02:44:48Z

It should... I hope it is...

elevatebart · 2022-03-17T02:45:31Z

It is

shadow7412 · 2022-03-20T23:02:53Z

@elevatebart is it though?

This is an excerpt from package.json in `node_modules/vue-styleguidist`

"dependencies": {
 "@vxna/mini-html-webpack-template": "^1.0.0",
 "ast-types": "0.13.4",
 "classnames": "^2.3.1",
 "clean-webpack-plugin": "^3.0.0",
 "cli-progress": "^3.9.0",
 "clipboard-copy": "^3.2.0",
 "clsx": "^1.1.1",
 "codemirror": "^5.60.0",
 "common-dir": "^2.0.2",
 "copy-webpack-plugin": "^5.1.2",
 "core-js": "^3.9.1",
 "css-loader": "^2.1.1",
 "es6-object-assign": "^1.1.0",
 "es6-promise": "^4.2.8",
 "escodegen": "^1.14.3",
 "findup": "^0.1.5",
 "function.name-polyfill": "^1.0.6",
 "github-slugger": "^1.3.0",
 "glob": "^7.1.6",
 "glogg": "^1.0.2",
 "hash-sum": "^1.0.2",
 "is-directory": "^0.3.1",
 "javascript-stringify": "^1.6.0",
 "jss": "^10.6.0",
 "kleur": "^2.0.2",
 "leven": "^2.1.0",
 "loader-utils": "^1.4.0",
 "lodash": "^4.17.21",
 "lru-cache": "^4.1.5",
 "mini-html-webpack-plugin": "^3.1.3",
 "minimist": "^1.2.5",
 "prismjs": "^1.23.0",
 "prop-types": "^15.7.2",
 "q-i": "2.0.1",
 "qss": "^2.0.3",
 "react": "^17.0.2",
 "react-codemirror2": "^7.2.1",
 "react-dev-utils": "^12.0.0-next.47",
 "react-dom": "^17.0.2",
 "react-group": "^3.0.2",
 "react-icons": "^3.11.0",
 "react-lifecycles-compat": "^3.0.4",
 "react-simple-code-editor": "^0.11.0",
 "react-styleguidist": "^11.1.6",
 "rewrite-imports": "^2.0.3",
 "source-map": "0.6.1",
 "style-loader": "^1.3.0",
 "terser-webpack-plugin": "^2.3.8",
 "to-ast": "^1.0.0",
 "vue-docgen-api": "^4.44.22",
 "vue-inbrowser-compiler": "^4.44.22",
 "vue-inbrowser-compiler-utils": "^4.44.22",
 "webpack-dev-server": "^3.11.2",
 "webpack-merge": "^4.2.2"
},
"deprecated": false,
"description": "Vue components style guide generator",
"devDependencies": {
 "@babel/cli": "7.17.6",
 "@babel/core": "7.17.5",
 "@babel/plugin-proposal-class-properties": "7.16.7",
 "@babel/plugin-proposal-object-rest-spread": "7.17.3",
 "@babel/plugin-syntax-dynamic-import": "7.8.3",
 "@babel/plugin-transform-runtime": "7.17.0",
 "@babel/preset-env": "7.16.11",
 "@babel/preset-react": "7.16.7",
 "@babel/preset-typescript": "7.16.7",
 "@babel/runtime": "7.17.2",
 "@babel/types": "7.17.0",
 "@testing-library/react": "11.2.7",
 "@types/buble": "0.20.1",
 "@types/cli-progress": "1.8.1",
 "@types/copy-webpack-plugin": "4.4.4",
 "@types/doctrine": "0.0.5",
 "@types/escodegen": "0.0.7",
 "@types/loader-utils": "1.1.6",
 "@types/lodash": "4.14.178",
 "@types/mini-html-webpack-plugin": "2.2.2",
 "@types/prismjs": "1.16.6",
 "@types/pug": "2.0.6",
 "@types/react-dev-utils": "9.0.10",
 "@types/react-dom": "17.0.11",
 "@types/react-lifecycles-compat": "3.0.1",
 "@types/terser-webpack-plugin": "1.2.1",
 "@types/webpack": "4.41.32",
 "@types/webpack-dev-server": "3.11.6",
 "@types/webpack-merge": "4.1.5",
 "buble": "0.20.0",
 "concurrently": "4.1.2",
 "ejs": "2.7.4",
 "pug": "3.0.2",
 "strip-shebang": "1.0.2",
 "vue": "2.6.14",
 "vue-template-compiler": "2.6.14",
 "webpack": "4.46.0"
},

shadow7412 · 2022-03-20T23:08:19Z

@shadow7412 It should be @vue/compiler-sfc. Notice the @ at the front.

I tried npm installing @vue/compiler-sfc, but I'm getting the exact same error. Note that the import I mentioned there is from this project rather than my own, so if it's wrong and supposed to be prefixed with a @ as you say, then I'm surprised this is working for anyone.

elevatebart · 2022-03-21T02:09:06Z

First a quick detail about dependencies:

Vue-styleguidist depends on vue-docgen-api that depends on @vue/compiler-sfc and @vue/compiler-core.

elevatebart · 2022-03-21T02:10:07Z

Second, can you please try and create a reproduction on a GitHub repo.

This is the best way I can help you.

shadow7412 · 2022-04-06T04:00:30Z

Sorry about the delay - does this work for you? (Though I ended up with a different error message again... :/)

elevatebart · 2022-04-08T17:46:12Z

@shadow7412 It does work for me, except I do not have a font-awesome pro account.

I was able to work around that, but do not get the error you mention about @vue/compiler-sfc.

What OS/ version of node/version of npm are you using?

elevatebart · 2022-04-08T17:51:56Z

Also, when using the vue-cli, please use the cli-plugin. There is a lot of weird quirks about using vue-cli and it needs the plugin.

See this doc for more info.

Psycarlo · 2022-04-25T16:43:41Z

I have a vite-vue3-typescript project
When I install Vue Styleguidist
yarn add --dev vue-styleguidist
and then run
vue-styleguidist server
I get
Error: This version of vue-styleguidist is only compatible with Vue 2.

StefanGhiban · 2022-06-03T05:37:37Z

I have a vite-vue3-typescript project When I install Vue Styleguidist yarn add --dev vue-styleguidist and then run vue-styleguidist server I get Error: This version of vue-styleguidist is only compatible with Vue 2.

Same project, same issue.

Gagydzer · 2022-06-16T13:13:17Z

Is it work with vue 3 or not?
Tried with @vue/cli 4.5.15 and it requiries vue-template-compiler

elevatebart · 2022-06-16T14:56:44Z

Is it work with vue 3 or not?

Tried with @vue/cli 4.5.15 and it requiries vue-template-compiler

Not yet.

elevatebart · 2022-06-18T18:52:43Z

I believe I will be able to add alpha support for vue 3 around the week of July 4th.

Expect a new major version (5.0.0-alpha) to be released mid July. Then we shall see ;)

elevatebart · 2022-07-08T18:31:52Z

Compatibility with Vue 3 was achieved without breaking change in 4.46.1

https://github.com/vue-styleguidist/vue-styleguidist/releases/tag/vue-styleguidist%404.46.0

elevatebart · 2022-07-08T18:32:30Z

I will close this issue now, please open separate issues for bug reports ;)

TYTYTY

elevatebart added the bug Something isn't working label Oct 13, 2020

elevatebart changed the title ~~feat(vue-docgen-api): Vue 3 Support~~ feat: Vue 3 Support Oct 13, 2020

elevatebart added this to todo in vue-styleguidist via automation Oct 13, 2020

elevatebart added enhancement New feature or request intend to implement Sometime in the next 2 major release this will be implemented and removed bug Something isn't working labels Oct 13, 2020

elevatebart pinned this issue Oct 16, 2020

elevatebart mentioned this issue Oct 17, 2020

List of central vue libraries with their Vue3 compatibility status sonicoder86/awesome-vue-3#30

Closed

elevatebart mentioned this issue Oct 20, 2020

Vue3 compatibility status of central vue libraries vuejs/awesome-vue#3544

Open

elevatebart mentioned this issue Oct 28, 2020

Error thrown with Vue 3 - Cannot Find vue.esm.js #989

Closed

elevatebart mentioned this issue Nov 9, 2020

Vue3 support arielsalminen/vue-design-system#213

Open

elevatebart added a commit that referenced this issue Nov 25, 2020

fix(docgen): allow TypeScript to export a constant

353601e

also valid for vue 3 defineComponent cc #997

phated mentioned this issue Feb 25, 2021

Argstable not being generated for Vue3 components using vue-class-component syntax storybookjs/storybook#14052

Closed

bodograumann mentioned this issue May 31, 2021

Incompatible with vue 3.0 storybookjs/vue-cli-plugin-storybook#111

Closed

IanVS mentioned this issue Apr 7, 2022

[Bug] Unable to find local modules using resolve alias storybookjs/builder-vite#316

Closed

elevatebart closed this as completed Jul 8, 2022

elevatebart unpinned this issue Jul 8, 2022

TheJaredWilcurt mentioned this issue Jul 13, 2022

Vue-CLI + Vue 3 "Happy Path" documentation #1355

Closed

feat: Vue 3 Support #997

feat: Vue 3 Support #997

Comments

crutch12 commented Oct 13, 2020

elevatebart commented Oct 13, 2020

elevatebart commented Oct 13, 2020 • edited

elevatebart commented Oct 13, 2020

elevatebart commented Oct 14, 2020

crutch12 commented Oct 14, 2020

elevatebart commented Oct 17, 2020

crutch12 commented Oct 22, 2020

elevatebart commented Oct 22, 2020

spaceemotion commented Nov 24, 2020

elevatebart commented Nov 24, 2020

spaceemotion commented Nov 25, 2020

spaceemotion commented Nov 25, 2020

elevatebart commented Nov 25, 2020

Keyes commented Feb 24, 2021

elevatebart commented Feb 24, 2021

mambari commented May 9, 2021

dvh91 commented Jan 18, 2022

shadow7412 commented Mar 11, 2022

elevatebart commented Mar 12, 2022

shadow7412 commented Mar 12, 2022 • edited

shadow7412 commented Mar 15, 2022 • edited

bodograumann commented Mar 15, 2022

shadow7412 commented Mar 15, 2022

fallsimply commented Mar 15, 2022

elevatebart commented Mar 15, 2022

shadow7412 commented Mar 16, 2022

elevatebart commented Mar 17, 2022

elevatebart commented Mar 17, 2022

shadow7412 commented Mar 20, 2022 • edited

shadow7412 commented Mar 20, 2022

elevatebart commented Mar 21, 2022

elevatebart commented Mar 21, 2022

shadow7412 commented Apr 6, 2022

elevatebart commented Apr 8, 2022

elevatebart commented Apr 8, 2022

Psycarlo commented Apr 25, 2022

StefanGhiban commented Jun 3, 2022

Gagydzer commented Jun 16, 2022

elevatebart commented Jun 16, 2022

elevatebart commented Jun 18, 2022

elevatebart commented Jul 8, 2022

elevatebart commented Jul 8, 2022

elevatebart commented Oct 13, 2020 •

edited

shadow7412 commented Mar 12, 2022 •

edited

shadow7412 commented Mar 15, 2022 •

edited

shadow7412 commented Mar 20, 2022 •

edited