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>
Related
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>
How can I get the current route using useRoute for a component that's outside of the <router-view />? Is this possible?
Breadcrumbs.vue
<script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.name) // undefined
</script>
App.vue
<template>
<Breadcrumbs />
<router-view />
</template>
The alternative is that I have to put <Breadcrumbs /> at the top of every single view component, and I was hoping to avoid that and instead just include it once in my App.vue
route.name is undefined in your example because that's the initial value when the component is rendered before the route has resolved.
For the component to reactively update based on the current route, use a watcher (e.g., watch or watchEffect):
import { watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
watchEffect(() => {
console.log(route.name)
})
demo
In your main file, try to mount app like this
router.isReady().then(() => {
app.mount('#app');
});
then useRoute() should be ready in your component
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
I tried importing my App. vue file inside app.js like this:
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App)
});
My App.vue file:
<template>
<div>
<h2>My Application</h2>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
This doesnt work an gives me this error:
"export 'default' (imported as 'App') was not found in './App'
However, if I add .vue inside my import it suddenly works just fine. In other tutorials I found for Symfony and vue it works fine without having to add .vue. Any reason as to why it's not working for me?
I'm using the Accounts UI meteor package in my React + Meteor project and want to render the loginButtons template with the property align="right". In Blaze the code would just be {{> loginButtons align="right"}}, but I'm at at a loss with how to add this property in React.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Template } from 'meteor/templating';
import { Blaze } from 'meteor/blaze';
export default class AccountsUIContainer extends Component {
componentDidMount() {
this.view = Blaze.render(Template.loginButtons, // How do I give loginButtons `align="right`?
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount() {
Blaze.remove(this.view);
}
render() {
return <span ref="container" />;
}
}
I think Blaze.renderWithData() may be part of the solution, but my tests with this method haven't worked so far. I also think people have created solutions to using Blaze templates in React before, but I'm not sure these alternate solutions would be the "right" way to solve this problem in Meteor 1.4.
The answer was right inside the documentation. First meteor add gadicc:blaze-react-component, then in the component
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
<div>
<Blaze template="loginButtons" align="right" />
</div>
);