Stack Overflow Asked by CreeKLY on January 20, 2021
I have to create a vue web component for a large scale Webproject. And want to use it as a custom HTML-Element.
The Component and the Webproject uses Bootstrap for styling.
I import Bootstrap in the component and in the Main Webproject.
But when i build it and import the .js to my Main Project the component isnt bootstraped.
component.vue
<template>
<div >
<button type="button" class="btn btn-primary">weiter</button>
</div>
</template>
<script>
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
name: 'HelloWorld',
props: {
msg: String
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"web-component": "vue-cli-service build --inline-vue --target wc --name test-02",
"web-async": "vue-cli-service build --name test-02 --target wc-async 'src/components/*.vue'"
},
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP