Question: Update compatibility for vue 3.*

[curthusting]

Are there plans to update this for use with vue3?

[mgdodge]

Yes, it will get updated for vue 3. I have been waiting for the documentation and migration guides to get published, which they now are. I hope to address it soon.

[curthusting]

Thanks for the update! I was able to test it out with vue add vue-next and manually update the files that don't match their predefined naming conventions, i.e. main.js vs dev/serv.js, etc. and the serve command works as expected, but the build fails with

[!] Error: Cannot find module 'vue-template-compiler'
Require stack:
- ***/node_modules/@vue/component-compiler/dist/compiler.js
- ***/node_modules/@vue/component-compiler/dist/index.js
- ***/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.js
- ***/build/rollup.config.js
- ***/node_modules/rollup/dist/shared/loadConfigFile.js
- ***/node_modules/rollup/dist/bin/rollup

and when I install vue-template-compiler manually I get a different error message

[!] Error: 

Vue packages version mismatch:

- vue@3.0.0-rc.5 (***/node_modules/vue/index.js)
- vue-template-compiler@2.6.11 (***/node_modules/vue-template-compiler/package.json)

Any thoughts on how I might be able to bypass this in the meantime while we wait for the official v3 launch and docs?

[thespacedeck]

Hey there,

• importing Vue from 'vue' does not exist, and
• $ vue add xx runs into "Vue__default.default.extend is not a function" found in dist/xx.ssr.js:55 file

Really looking forward to compatibility with vue next.

Thanks for this amazeballs lib :)

[mgdodge]

Just released v4.0.0-beta.0 which includes preliminary Vue 3 support. Go ahead and try it out. Likely will not release v4.0 final until Vue 3 is finalized, of course.

[soerenmartius]

Just released v4.0.0-beta.0 which includes preliminary Vue 3 support. Go ahead and try it out. Likely will not release v4.0 final until Vue 3 is finalized, of course.

Since the first stable RC of Vue3.0.0 has been released, are there any plans to upgrade this project to an stable release any time soon?

Thanks for your great work!

[mgdodge]

Just released v4.0.0-beta.1 to address some issues. I'm gonna let that sit for just a bit to see if anything else comes up. If not, then I will probably cut this as v4.0.0 official very soon.

[mrtrimble]

I tried out v4.0.0-beta.1 and I'm running into an odd issue that I think I've determined to be the use of <slot> in my components.

• Ran the build command
• Installed the package in another app locally
• Imported the component

But when I try to actually use it, I'm getting an warning/error that says:

The component is setup such as:

<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

However if I change the component to have the button text set via props, it seems to work. That sort of thing should be fine for buttons, I guess -- but other components like a <card></card> will need to be able to accept more than just text.

Any suggestions?

[mgdodge]

@mrtrimble I just ran the beta and created a simple component using the template you pasted here. The component worked exactly as expected when built/packed/installed elsewhere. There is nothing wrong with the scaffolding produced by the vue-sfc-rollup beta. The problem is likely elsewhere in your code.

In order to get any further with this, a sample repo would be required.

[mrtrimble]

@mgdodge hmm, interesting... I'll try it again from scratch tomorrow and see what happens - I can put up a repo if I run into the same problem.

It will be great if it does work though! Thanks!

[mrtrimble]

@mgdodge Okay, started from scratch and continue to experience the same issue. Here is a sample repo: https://github.com/mrtrimble/sample-lib

When I build and install that in another sample app that I build with the vue cli, that's when I run into that issue (first I actually ran into an ESLint issue, but was able to clear that up).

I did actually notice something else -- whenever I build the library, I'm getting warnings saying that vue was never used:

[alexoragz]

If it helps any, I also experienced the same issue but a work around seems to be replacing the <template> with its render() function equivalent.

[mgdodge]

For whatever reason, I checked out that repo and ran a build, and things still worked just fine for me! Tried in a vanilla vue-cli site, both in dev mode as well as full build mode. Do you have a sample repo of the site you are trying to include it in as well? Have you tried updating the dependencies? Not sure what to tell you about this...and I know the "it works for me" response is the most maddening of responses...

[mrtrimble]

I really was afraid you'd say that, haha --

Originally I was trying this on my work Macbook, so just for fun, I tried again from scratch on my Windows gaming machine (I don't usually use this for dev purposes, so EVERYTHING is from scratch) and still run into the same issue.

Here is my exact process: 1.) Install vue-sfc-rollup - I did this by running: npm install -g vue-sfc-rollup@4.0.0-beta.1

2.) Create a library by:

• Running sfc-init
• Selected: Vue 3 for version of vue
• Selected: Library
• Gave it a name sample-lib
• Selected: JavaScript
• Selected default location

3.) Installed node packages with npm install

4.) Renamed sample-lib-sample.vue to sample-button.vue

5.) Edited sample-button.vue file to remove unnecessary code and only include the following:

<script>
import { defineComponent } from "vue";

export default /*#__PURE__*/ defineComponent({
  name: "SampleButton", // vue component name
});
</script>

<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

<style scoped>
.button {
  background: blue;
  color: white;
}
</style>

6.) Edited the src\lib-components\index.js file to look like this:

/* eslint-disable import/prefer-default-export */
export { default as SampleButton } from './sample-button.vue';

7.) Imported the component into dev\serve.vue and added it to the template

8.) Ran npm run serve -> Works as intended!

9.) Build the library using npm run build

10.) Created new Vue app via Vue cli like so:

• Ran vue create sample-app
• Chose Default (Vue 3 Preview)
• Ran npm run serve -> App works!

11.) Installed the sample-lib by running: npm install ../sample-lib -> Library installed

12.) Import the component into App.vue and add to template like so:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <sample-button>This is another test button</sample-button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { SampleButton } from "sample-lib"

export default {
  name: 'App',
  components: {
    HelloWorld,
    SampleButton
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

13.) Try to run, but run into ESLint Error :(

14.) Circumvent ESLint error by removing: "@vue/cli-plugin-eslint": "~4.5.0", from package.json (Found out that if I just exclude ESLint from vue create process that this isn't an issue...)

15.) Run again, this time it runs but now seeing the same error message: [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol)

Really not sure what I am doing wrong as this seems like such a simple thing to use, but if any of that seems incorrect please let me know.

Thank you so much for assistance!

EDIT: Just updated my @vue/cli version as I realized that it was behind, but still receiving the same error message.

[mgdodge]

Alright, @mrtrimble , following the exact steps you provided, I did get the issue reproduced, but it is not an error in the code - it is a problem with how you are choosing to install it.

By running npm install ../sample-lib you create a symlink directly to the source directory. If you were to run npm pack in the source libarary, that generates a tarball that is an actual representation of what gets published to npm. You can install this tarball directly, and everything works with no modifications.

Alternatively, running npm link from within the source directory, you register that directory as a module that you can then install in other projects via symlink - interestingly, this type of symlink doesn't have the same issues. In the sample-app directory, you would then run npm link sample-lib and it would create a symlink.

Both of these scenarios work properly, and are documented in the npm docs. So I can confirm this is not a bug with vue-sfc-rollup or with vue itself, since the output of the npm pack method is what is officially distributed, and it works fine.

[mrtrimble]

I definitely figured it was something I was doing wrong -- was definitely not aware of npm pack or npm link! I'll give this a try now and see how it goes!

Update: It works! I ran npm pack inside my sample-lib directory, then ran npm install ../sample-lib/sample-lib-1.0.0.tgz inside my sample-app directory and it does indeed work!

Thank you for all your assistance on this @mgdodge!

[mgdodge]

Closing this issue, as Vue 3 support is now released in v4.0.0. Thanks for all the feedback during this process.

[deltabrot]

Alright, @mrtrimble , following the exact steps you provided, I did get the issue reproduced, but it is not an error in the code - it is a problem with how you are choosing to install it.

By running npm install ../sample-lib you create a symlink directly to the source directory. If you were to run npm pack in the source libarary, that generates a tarball that is an actual representation of what gets published to npm. You can install this tarball directly, and everything works with no modifications.

Alternatively, running npm link from within the source directory, you register that directory as a module that you can then install in other projects via symlink - interestingly, this type of symlink doesn't have the same issues. In the sample-app directory, you would then run npm link sample-lib and it would create a symlink.

Both of these scenarios work properly, and are documented in the npm docs. So I can confirm this is not a bug with vue-sfc-rollup or with vue itself, since the output of the npm pack method is what is officially distributed, and it works fine.

I've been struggling to get this working but the solution was to use npm pack and installing using that method. I had previously tried this with npm link which resulted in the same issues described in the original post, just thought this was worth mentioning in case somebody else encounters the same problem.