Building Vue app with target "Web Component" - SCSS styling not applied? - vue.js

So I have a very small app I've built that I want to integrate into a website as a web component. So I build the app using vue-cli-service build --target wc --inline-vue --name name-of-component
However the SCSS styling is not included? It works fine in the live reload during development. The SCSS file is imported in the main.js file like this:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import './assets/main.scss';
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');

I'm not sure why, but a workaround is to import the SCSS within the <style> block instead of <script>:
<style lang="scss">
#import '~#/assets/main.scss';
</style>

I found a solution which is a mix of importing like tony19 said:
<style lang="scss">
#import '~#/assets/main.scss';
</style>
Then using sass main.scss main.css and including a <link rel="stylesheet" href="main.css"> in the same document as the web component. That way the styling was applied correctly.
Also generally I would recommend hosting any assets such as css, fonts, images, svgs, etc. etc. on a CDN and using the full url to the asset in the web component so that you don't have to include these on the web pages using the component.

Related

Serving SVG content from static/assets folder in Nuxt

I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.
In PHP there's a magic function called file_get_contents('path')
Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.
Check out the #nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.
<template>
<NuxtLogo class="logo" />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<style scoped>
.logo {
fill: #fff;
}
</style>

import compiled sass as string in vue

I'm trying to build a simple mail editor in vue (and vuex). Once everything is edited out of some input, i'd like to inline some scss files into the resulting html, using juice.
If i try to import one css using webpack raw-loader,
import css from '!raw-loader!./../assets/sass/test.css';
then i can pass the css value to juice
let result=juice.inlineContent(html,css)
and then injecting with v-html (see below) in one of my component to render the email.
Whitout using the raw-loader, the css will be applied to everything, beeing imported.
If i try to use the raw-loader with a scss file, it's not compiled - rightly - properly.
import css from '!raw-loader!./../assets/sass/main.scss';
I'm quite new to vue and webpack, so, is there something/somewhere i can dig in to understand a way to preprocess a scss file and then pass it as a string to vue, without applying it as style in vue?
I've also tried to scope some css to a component in which i use a v-html tag (and where the inlined html should go)
<template>
<div v-html="render" />
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["render"]),
},
};
</script>
<style lang="scss" scoped>
table {
border: 1px solid red;
}
</style>
At first in the value (the getters) ther's no table, but when i add it to the component (with the editor) the style it's not rendered at all, as if the component is not re-rendered. That's the reason i decided to inline the css before injecting in the DOM, instead of doing it after some action - like a click on a button.
I've also tried using >>> but with no luck. I know this is not the main question, just a "side quest", but i'm just learning
import css from '!raw-loader!sass-loader!./../assets/sass/main.scss';
It first compile the sass and then import it as a row string... easy peasy

CoreUI breadcrumb navbar ruined after importing bootstrap and bootstrap-vue css files

I've added bootstrap and bootstrap-vue to my project via npm. After that, I've added the top two import statements to my App.vue file. After that, it ruins the design of CoreUI's default horizontal nav bar. What am I doing wrong?
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
//Import bootstrap <-- Those two are new
#import '~bootstrap';
#import '~bootstrap-vue';
//Import Main styles for this application
#import 'assets/scss/style';
</style>
As soon as I comment them out again, the design goes back to normal, but my b-table doesn't look right.
CoreUI uses a customized version of Bootstrap V4.x SCSS (basically you are importing two versions of bootstrap v4 CSS).
As long as CoreUI's SCSS defines Bootstrap v4 variables, then do this in your main SCSS file
// Import CoreUI SCSS
// This assumes CoreUI imports bootstrap variables, functions, etc
#import '~coreui';
// Import BootstrapVue SCSS
#import '~bootstrap-vue';
// Add/Import style overrides and custom styles here
This allows BootstrapVue's SCSS to use the variables overrides defined by CoreUI SCSS

Vuetify elements do not appear perfectly on netlify after deployment

My team and I developed a website using VueJS. In one of the pages, we used Vuetify elements such as vue-extension-panels and v-card. During development, we run using npm run dev and everything looks fine. I believe that all dependencies are installed correctly as it appeared fine during development.
Then, we deployed the web with Netlify. After deployment, Vuetify elements do not seem to appear correctly.
Below are the images that compare before and after deployment on Netlify:
Here is the packages.json:
So, it would be great if someone can explain why it is not showing properly or if someone knows netlify compatibility with Vuetify.
Thanks!
You are able to use any library with netlify. When you use $ vue add vuetify to add the dependency, everything should be fine. If you did install it otherwise, make sure to check the following things.
Vuetify is under dependencies in your package.json.
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0"
}
You correclty include it in your main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
vuetify plugin (src/plugins/vuetify.js)
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({});
You have a vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}

How do I import the bootstrap.min.js into Vue JS

My Vue JS app Bootstrap nav-bar does not work in mobile. I have installed the Bootstrap, JQuery and popper node modules. My Vue JS app displays the error Module Not Found. Can't resolve 'node_modules/bootstrap/dist/js/bootstrap'
Here is my code on my App.vue
<style lang="scss">
$primary: #05b2dd;
#import "node_modules/bootstrap/scss/bootstrap";
</style>
<script>
import "node_modules/jquery/dist/jquery.slim.min";
import "node_modules/popper/dist/popper.min";
import "node_modules/bootstrap/dist/js/bootstrap.min";
</script>
The file path in my Vue app is present: node_modules\bootstrap\dist\js\bootstrap.min.js
I've moved the import of the JS files to main.js. Here is the code snippet
import "../node_modules/jquery/dist/jquery.slim.min";
import "../node_modules/popper.js/dist/popper.min";
import "../node_modules/bootstrap/dist/js/bootstrap";
The navigation is now working on mobile