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
Related
I can import fontawesome-icons in app.js:
import {createApp} from 'vue';
import app from "../vue/app";
import {library} from '#fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome';
import {faWrench} from '#fortawesome/free-solid-svg-icons';
library.add(faWrench);
createApp(app)
.component('fa', FontAwesomeIcon)
.mount("#app");
and use them in components like so:
<fa :icon="[ 'fa', 'wrench' ]" size="2x"></fa>
The font-awesome-animation npm doc tells to use this:
<i class="fa fa-wrench faa-wrench animated"></i>
but it doesn't seem to work in Vue 3.
I've tried importing font-awesome-animation after installing it like so:
import {faaWrench} from 'font-awesome-animation';
library.add(faaWrench);
but it breaks the site and the console shows:
Uncaught TypeError: Cannot read properties of undefined (reading 'prefix')
How do I use font-awesome-animation in Vue 3?
font-awesome-animation is just a collection of CSS animation keyframes, defined as global styles. The package does not have any exports, so don't try to import anything from it (which would just be undefined, leading to the error you observed when trying to add it to the icon library).
To use font-awesome-animation from NPM, import its CSS file like this:
// main.js
import 'font-awesome-animation/css/font-awesome-animation.min.css'
Then append the faa-ANIMATION_NAME (where ANIMATION_NAME is one of the animations from the library's animation list) and animated classes to a <font-awesome-icon>. For example, this markup applies the tada animation to the fas-snowman icon:
<font-awesome-icon :icon="['fas', 'snowman']" class="faa-tada animated" />
demo
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.
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
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
I'm new to react and antd.
I started a new react project using create-react-app. I installed antd (ant.design).
I tried out the DatePicker by adding an import and adding it to my render, modifying App.js as follows:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<DatePicker/>
</div>
);
}
}
export default App;
In Chrome it seems to work, although the styling is weird.
In IE11 it doesn't load because of a startsWith function call (startsWith not supported in IE11). However, the DatePicker demo at the ant.design website works in IE11.
It seems I'm missing some polyfills / old browser support somehow. If I try to do a production build and serve that, it also has the same error.
What needs done to get antd working for browsers such as IE11 with an app created via create-react-app?
Create-react-app doesn't include polyfills.
I worked around this by installing core-js and importing the es6 module I wanted in the src/index.js file:
import 'core-js/es6';
You can also import only the specific module you want:
import 'core-js/es6/function';
I recommend the first, since you'll most likely end up using more functions throughout your app.