Skip to content

Issue with bundling vuetify component using vuecli3 #3672

Closed
@bgadiel

Description

@bgadiel

Version

3.5.1

Environment info

Unknown command info.

Steps to reproduce

I am trying to build a common ui library based on vuetify.
I created a generic vuetify button and tried to bundle it using vue-cli3.
Then, I import the package into another project.
My issue is that the new

Created a new button in gBtn.vue:

  <template>
      <v-container grid-list-xl fill-height>
        <v-layout column>
          <v-flex xs2>
            <div>Hello</div>
              <v-btn color="success">Success</v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </template>

And on index.js:

import gBtn from './components/Forms/gBtn.vue'; // import vue file

const Components = {
  gBtn
};

export default Components;
export {
  gBtn
};

And then I run this command using vue-cli3:

vue-cli-service build --target lib --name ui-core ./src/index.js

npm link

On the target project I import the button:

<template>
  <gBtn></gBtn>
</template>

<script>
import { gBtn } from 'ui-core';

export default {
  name: 'create-market',
  components: {
    gBtn,
  },
};
</script>

What is expected?

<button type="button" class="v-btn theme--light success">
      <div class="v-btn__content">Success</div>
</button>

What is actually happening?

<div class="container fluid pa-0 ma-0">
      <div data-v-6f7ae281="" class="container grid-list-xl fill-height">
        <div class="layout column">
          <div class="flex xs2"><div>Hello</div>
          </div>
        </div>
      </div>
    </div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions