Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(storybook): update Vue and Angular docs #475

Closed
wants to merge 9 commits into from

Conversation

acstll
Copy link
Collaborator

@acstll acstll commented Jul 26, 2021

  • update Vue and Angular docs
  • add proxy-package deprecation warning in README
  • make sure translations are good
  • update example apps in examples/ folder

Comment on lines +30 to 55
```js
// main.js
Vue.config.ignoredElements = [/scale-\w*/];
```

For **Vue v3**, set `compilerOptions.isCustomElement`:

```js
// in webpack config
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
options: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-'),
},
},
},
// ...
];

// or in main.js (on-the-fly template compilation)
const app = Vue.createApp({});
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey,
It's a nice improvement for vue3.
But it only handles basic setups with Webpack and doesn't have a solution for vue-cli which uses vue.config.js files.
For our Project using single-spa-vue a vue.config.js file would be preferred since we would dislike using an additional webpack file.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, we can surely add the vue.config.js version of this, which is actually what we're using in the updated Vue3 example.

// vue.config.js
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements
          options.compilerOptions = {
            isCustomElement: (tag) => tag.startsWith('scale-')
          }
          return options
        })
  }

This is what you're referring to, right?

https://github.com/telekom/scale/blob/bd37956abfa678791073b1ebbf08937908e6502f/examples/vue3-boilerplate/vue.config.js

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jup exactly 👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

amazing, will update

@acstll acstll closed this Aug 4, 2021
@acstll acstll deleted the feat/docs-framework-update branch August 4, 2021 13:33
@acstll
Copy link
Collaborator Author

acstll commented Aug 4, 2021

#500 👀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants