Installing ElementPlus Icons globally on Vue 3 - css

I am currently working on a project with Vue 3 and Element Plus.
As of the moment, the element plus Icons are not showing on my app.
I have installed them with yarn using
$ yarn add #element-plus/icons
and I have no idea what to do next.
I have tried importing it on my main.ts file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "#element-plus/icons";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");
But it is not showing still.

The #element-plus/icons package contains named exports for each icon found in the Icon Collection. For example, to use the MagicStick icon, import it by name, and register it as a component. In Vue 3, you can use a <script setup> block to locally register the component simply by importing the component:
<script setup>
import { MagicStick } from '#element-plus/icons-vue'
</script>
Then use it as a component in your template:
within <el-icon>, which lets you easily specify the icon's size and color as props
Note: Clicking an icon card from the Icon Collection UI automatically copies boilerplate markup (<el-icon><magic-stick/><el-icon>) to your clipboard for easily pasting it into your own file.
<template>
<el-icon :size="100">
<MagicStick />
</el-icon>
</template>
or standalone, which requires applying your own styles:
<template>
<MagicStick class="icon" />
</template>
<style scoped>
.icon {
color: #f00;
height: 200px;
}
</style>
demo

Related

Vue3 and Swiper component - using Pagination in composition API

I want to use the Swiper component - https://swiperjs.com/vue#usage using Composition API on Vue^3.2.31
I can get the basic swiper working, but I cannot get Pagination (or any other module) to work.
<template>
<swiper :slides-per-view="1" :pagination="true">
<swiper-slide>Foo</swiper-slide>
<swiper-slide>Bar</swiper-slide>
</swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css/pagination";
import "swiper/css";
</script>
The examples on the page focus on Options API. I'm not familiar enough with translating from Options to Composition to be able to follow the documentation on how to get Pagination working.
I tried import { Pagination } from "swiper"; but I don't know how to get the "swiper/vue" to use it.
The documentation says "By default Swiper Vue.js uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first."
How do I install and use them in Composition API?
To install additional modules, you just need to pass them as the props of swiper
<template>
<swiper :modules="modules" :slides-per-view="1" :pagination="true">
<swiper-slide>Foo</swiper-slide>
<swiper-slide>Bar</swiper-slide>
</swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from 'swiper';
// define your modules list here
const modules = [Pagination]
</script>

Vue 3 rellax.js usage

i have installed rellax.js in vue3 project.
import App from './App.vue'
import VueRellax from 'vue-rellax'
createApp(App).use(VueRellax).mount(#app)
but when i add rellax class on any components template tags its not working
<section class="rellax section portfolio-section pd-34" id="portfolio">
<PortfolioComponent />
</section>
not working when i add class rellax in component class even doesnot show in inspect
It looks like vue-rellax was never rewritten for Vue 3. You're likely better off to use the rellax library and import it into your components or as a window variable.
App.vue:
<script setup>
import { onMounted } from 'vue';
import Rellax from 'rellax'
onMounted(() => {
let rellax = new Rellax('.rellax');
})
</script>

How to correctly use Quasar variables in scss style

I have configured a Vue3 + Quasar project via vue add quasar. I can't undersand how to use quasar sass/scss variables.
From the doc I'm expected to use
<style lang="scss">
div {
color: $red-1;
background-color: $grey-5;
}
</style>
but it causes a Undefined variable. error due to $red-1. If I explicitly import the styling file, I am able to use variables from there, such as $primary, but no luck with other Quasar variables.
<style lang="scss">
#import './styles/quasar.variables.scss';
div {
color: $primary;
}
</style>
Shall I explicitly import all the variables from Quasar sass/scss too?
My project is configured like:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'
const app = createApp(App)
app.use(Quasar, quasarUserOptions)
app.mount('#app')
Side question: when using css classes from Quasar, bg-primary and bg-secondary use Quasar-defined primary and secondary color instead of my styling choices. Is it the expected behavior?
Sass/SCSS variables are only available with quasar-cli managed apps.
https://quasar.dev/style/sass-scss-variables

CSS not changing when using React Router to route to another component

When I route my app to another component by using react-router-dom, the CSS doesn't change.
This is a minimalistic version of the code to demonstrate
App.js
import React from 'react';
import Home from './Home';
function App() {
return (
<div>
<Home></Home>
</div>
);
}
export default App;
Home.js
import React from 'react';
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Home.css
body {
background-color: blue;
}
Dashboard.js
import React from 'react';
import './Dashboard.css';
import React from 'react';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className='content'>
<h1>Dashboard</h1>
</div>
);
}
export default Dashboard;
Dashboard.css
.content {
display: flex;
align-content: center;
align-items: center;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
When I do /dashboard, it loads the Dashboard component, but it keeps the previous CSS that was loaded from the Home component that resides the App component. The background stays blue. I want that when I route to another component because I changed the URL, it loads whatever CSS that new component has attached to it and gets rid of whatever CSS was before. Is that possible?
Edit: I have made an example in CodeSandbox to illustrate. It's a little different from the code above due to the limitations of the playground, but the functionality is the same.
From what can be seen, importing as a module ends up importing it globally. If we comment the line import Home from "./Home"; the blue background disappears. Just importing the component, imports the whole CSS despite the CSS being imported in a modular way. I'm not sure if I am missing something.
Edit 2:
Here are the different solutions I tried:
CSS Modules, but the body style was still globally loaded.
Styled components don't let me modify the body or html selectors CSS. They require me to create a <div> element and
then have that element span the whole body which I would style
as if it was the body. Which is a workaround I don't want to use because for that I rather use CSS Modules for the whole body spanning .
Inline styling also doesn't let me modify the body or html selectors CSS. I would also need to use a workaround like a body spanning <div> as in Styled components.
The problem
When you import a css like you're doing here
import './Home.css';
you're importing it in a global scope, which means it will not disappear once imported.
The solutions
CSS Modules
What you want is either CSS Modules, which is used like this:
import styles from './Home.css';
<a className={styles.myStyleClass}>Hello</a>
Styled components
or a CSS-in-js framework such as styled components which is used like this:
import styled from 'styled-components';
const MyStyledElement = styled.a`
color: blue;
`;
<MyStyledElement>Hello</MyStyledElement>
Regular objects / inline styling
or just "regular" CSS-in-js like:
const myStyle = {
color: blue;
}
<a style={myStyle}>Hello</a>
There are plenty of options when it comes to styling, these alternatives are popular ones that I encourage you to explore and see which you enjoy.
After doing some more tests I have concluded that as of now it is not possible to change whatever CSS styles have been applied to a <body> or <html> selector in an React SPA when a CSS file is already loaded and one uses React Router to render other components. I still appreciate the answers and the time taken to help me find a solution. They are still valid answers if we are not talking about the <body> or <html> node in an HTML document. From them I learned about other ways to use CSS in React. I modified the original post with the solutions I tried.
What ended working was modifying the DOM styles with JavaScript whithin the component itself.
Home.js
import React from "react";
const Home = () => {
// Modify the DOM Styles with JavaScript
document.body.style.backgroundColor = "blue";
// Or uncomment below to modify the
// document root background color
// which in this case would be <html>
//document.bgColor = "blue";
// Or modify the root tag style of the document instead of the
// <body> (<html> in this case)
//document.documentElement.setAttribute('style', 'background-color: green');
return (
<div>
<h1>Home</h1>
<form action="/dashboard">
<input type="submit" value="Go to Dashboard" />
</form>
</div>
);
};
export default Home;
Here is a working example:
Where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
More info: styles-not-working-with-react-router

Cannot install 3rd party CSS framework into Vue app

I am trying to install and use the Salesforce Lightning Design System for my apps styles. But it just doesn't work. My steps (I am using vue-cli 3.4.0 + typescript):
npm install #salesforce-ux/design-system --save
At first I imported it into the styles of my App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#import url("/node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css");
body {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg stroke='%23CCC' stroke-width='0' %3E%3Crect fill='%23F5F5F5' x='-60' y='-60' width='110' height='240'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
Then I added the classes to a simple button:
<button class="slds-button slds-button_brand" #click="createTask">Save</button>
This does nothing. Classes are applied, but no styling.
I tried adding it to my main.ts:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css'
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
This makes the whole build fail because it says it can't resolve the module:
./src/main.ts
Module not found: Error: Can't resolve '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css' in '/usr/src/app/src'
This happens even though the dependency is in my package.json and the autocomplete in vscode shows me the relative path. I've tried diferent relative paths and none of them work. What's going on here?

Resources