I am creating a simple StencilJS web component, I am passing details as slot to component. The content will be invisible till manually make visible by clicking the button.
But while the application loads slightly flickering is happening in the component.
How to avoid flickering, but my requirement is to pass the details as slot.
Component.tsx
import { Component, Prop, h, State } from '#stencil/core';
#Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
detailBox: HTMLElement;
showDetails = () => {
this.detailBox.classList.remove('display-none');
};
render() {
return (
<div>
<button onClick={this.showDetails}>Show detail</button>
<span
id="detail"
ref={elem => {
this.detailBox = elem;
}}
class="display-none"
>
<slot></slot>
</span>
</div>
);
}
}
component.css
:host {
display: block;
}
.display-none {
visibility: hidden;
}
index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/display-flickering.esm.js"></script>
<script nomodule src="/build/display-flickering.js"></script>
<style data-styles></style>
</head>
<body>
<my-component> <button>I am from slot</button></my-component>
</body>
</html>
Related
I have application on aspnet mvc and import vuejs v3 cdn and i like use vuetify but i dont know how do it.
its my code example
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewData["Title"] - MVCAndVue</title>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
<script>
const {
ref,
reactive,
} = Vue;
//Define Vue app
const App = {
data() {
return {
};
},
methods: {
},
setup(props, context) {
}
};
// Create new Vue app
const app = Vue.createApp(App);
app.mount("#app");
</script>
You are facing this issue because you included Vuetify 2.x which is not compatible with Vue 3. So, use Vuetify 3 instead.
Now, the right way to use Vuetify via CDNs, you need to follow these steps-
Import Vuetify CSS in your head tag-
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
If you want to use material design icons, then import this CSS link in your head tag too-
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
Import the Vuetify script in your body tag-
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
If you are planning to use Vue3 also via CDN, then import the Vue script in your body tag-
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
Here is a complete working HTML file with all necessary imported CDNs for Vue3 and Vuetify3-
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.0.5/dist/vuetify.min.js"></script>
<script type="text/x-template" id="app-template">
<v-app>
<v-card
class="mx-auto"
width="400"
append-icon="mdi-human-greeting"
>
<template v-slot:title>
Title
</template>
<v-card-text>
Description
</v-card-text>
</v-card>
</v-app>
</script>
<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();
const app = createApp({
template: "#app-template",
})
.use(vuetify)
.mount("#app");
</script>
</body>
</html>
To read more about using CDNs, read here-
https://next.vuetifyjs.com/en/getting-started/installation/#cdn
https://next.vuetifyjs.com/en/features/icon-fonts/#material-design-icons
I am trying to learn stencilJS, I am developing the component which has input field with auto focus.
I am calling component twice in index.html, I am getting into strange issue the second render component is taking autofocus of first render component.
And the components are not render on same order every time, the component which renders last it's input field will have the focus remaining will not get autofocus.
Attached code below, please help me to sort out.
index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/testing.esm.js"></script>
<script nomodule src="/build/testing.js"></script>
</head>
<body>
<search-input data-test-id="test-two" place-holder="Search" value=""></search-input>
<search-input data-test-id="test-three" place-holder="Search" value=""></search-input>
</body>
</html>
Search-plugin.tsx
import { Component, h, Prop, Event, EventEmitter } from '#stencil/core';
#Component({
tag: 'search-input',
styleUrl: 'search-input.css',
shadow: true,
})
export class SearchInput {
private searchInput: HTMLInputElement;
#Prop() value = "";
#Prop() dataTestId!: string;
#Prop() placeHolder: string = "Search";
#Event() clearSearch: EventEmitter;
#Event() searchRequest: EventEmitter;
protected componentDidLoad() {
this.searchInput.focus();
}
render() {
return (
<div data-test-id={this.dataTestId} class="items-center flex bg-white border-solid rounded-sm border-gray-300 box-border text-xl border-1 pl-15 pr-12 py-9">
<input
type="text"
ref={el => (this.searchInput = el as HTMLInputElement)}
data-test-id={`${this.dataTestId}-search-input`}
class="focus:outline-none border-0 flex-grow w-full pl-15"
value={this.value}
placeholder={this.placeHolder}
/>
</div>
);
}
}
Two elements - custom elements / web components or standard HTML elements - cannot have focus at the same time. But your code tries to do this - every search-input on the page will try to take focus when the Stencil lifecycle executes componentDidLoad - so that last one rendered by Stencil wins. The order of which is not predictable because Stencil is asynchronous.
If you only want one of the elements to have initial focus, add a property to the component to enable this. For example:
export class SearchInput {
...
#Prop() autoFocus: boolean = false;
...
componentDidLoad() {
if (this.autoFocus) {
this.searchInput.focus();
}
}
}
<search-input auto-focus data-test-id="test-two" place-holder="Search" value=""></search-input>
<search-input data-test-id="test-three" place-holder="Search" value=""></search-input>
Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.
This is my script and html :
Vue.component('card', {
template: '<div class="card"></div>'
})
Vue.component('card-text', {
props: ['text-content'],
template: '{{ text-content }}'
})
new Vue({
el: '#app',
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app">
<card>
<card-text text-content="Text to show"></card-text>
</card>
</div>
</body>
</html>
as you can see I have 2 components, card and card-text.
I want to display these like this :
<card>
<card-text text-content="text to show"></card-text>
</card>
You would need slots to do that. Just change your card component to:
Vue.component('card', {
template: '<div class="card"><slot></slot></div>'
})
To be able to render different stuff inside <card></card>
You can read more in the docs
If you want to nest card-text inside card, just do as follows:
Vue.component('card', {
template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})
I am working with BootstrapVue and am trying to dynamically create components after the site is rendered (I want to use asynchronous data for the generation process later) with Vue and add them to the DOM.
(I am simulating the asynchrony in the demo by creating the components with a 1 second delay after the page is loaded).
This is what happens:
Vue is creating the components and then they should be mounted to the DOM. But sadly they don't show up. Instead this comment: <!--function(e,n,r,i){return Pt(t,e,n,r,i,!0)}--> is added to them DOM (at the correct position though) in place of the actual HTML code of the component.
This is the jsfiddle with example code that demonstrates the problem: https://jsfiddle.net/0stdxorj/1
Thank you for your help :).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<!-- Bootstrap Vue CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"
/>
<!-- Custom CSS -->
<link href="../vrc/vrc.css" rel="stylesheet">
<!-- Using: https://bootstrap-vue.org/ -->
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Vue JS -->
<script src="https://unpkg.com/vue#latest/dist/vue.min.js"></script>
<!-- Bootstrap Vue JS -->
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<!-- Portal Vue JS -->
<script src="https://unpkg.com/portal-vue#latest/dist/portal-vue.umd.min.js"></script>
<!-- Popper JS -->
<script src="https://unpkg.com/#popperjs/core#2"></script>
<!-- VCalendar JS -->
<script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
<!-- Application root element -->
<b-container fluid="xl">
<b-row align-h="center" align-v="start" id="card-container">
<!-- Card Inline Template -->
<card inline-template id="card-template">
<b-card
v-bind:title=card.title
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
style="max-width: 370px; margin: 5px"
class="no-select"
>
<b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
<b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
<v-calendar
is-expanded
:min-date='new Date()'
>
</v-calendar>
</b-collapse>
</b-card>
</card>
</b-row>
</b-container>
</div>
</body>
</html>
const vue = new Vue({
el: '#app'
})
const cardComponentConstructor = Vue.extend({
props: {
card: {
required: true,
default: {id: 0, title: 'Default.'}
}
},
template: '#card-template',
mounted() {
alert("mounted " + this.card.id + " " + this.card.title)
},
created() {
//alert("created " + this.card.id + " " + this.card.title)
}
});
window.addEventListener("load", function(event) {
setTimeout(function () {
createCard({propsData: {card: {id: 0, title: '0'}}})
createCard({propsData: {card: {id: 1, title: '1'}}})
}, 1000);
});
function createCard(props) {
let componentInstance = new cardComponentConstructor(props)
componentInstance.$mount()
document.getElementById("card-container").appendChild(componentInstance.$el)
}
I fixed the problem by going at it in another way. Vue re-renders v-for tags when using a key attribute (:key="card.id"). So I don't try to manually create the components anymore but make use of this feature and modify the cards data instead, which in turn then makes Vue re-render the deleted/modified/added cards:
Updated jsfiddle with my solution https://jsfiddle.net/t7k49a2n/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<!-- Bootstrap Vue CSS -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"
/>
<!-- Custom CSS -->
<link href="../vrc/vrc.css" rel="stylesheet">
<!-- Using: https://bootstrap-vue.org/ -->
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Vue JS -->
<script src="https://unpkg.com/vue#latest/dist/vue.min.js"></script>
<!-- Bootstrap Vue JS -->
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<!-- Portal Vue JS -->
<script src="https://unpkg.com/portal-vue#latest/dist/portal-vue.umd.min.js"></script>
<!-- Popper JS -->
<script src="https://unpkg.com/#popperjs/core#2"></script>
<!-- VCalendar JS -->
<script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
<!-- Application root element -->
<b-container fluid="xl">
<b-row align-h="center" align-v="start">
<!-- Card Inline Template -->
<card
inline-template
v-for="card in cards"
v-bind="{card: card}"
:key="card.id"
>
<b-card
v-bind:title=card.title
img-src="https://picsum.photos/600/300/?image=25"
img-alt="Image"
img-top
style="max-width: 370px; margin: 5px"
class="no-select"
>
<b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
<b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
<v-calendar
is-expanded
:min-date='new Date()'
>
</v-calendar>
</b-collapse>
</b-card>
</card>
</b-row>
</b-container>
</div>
</body>
</html>
Vue.component('card', {
props: {
card: {
required: true,
default: {id: 0, title: 'Default.'}
}
}
});
window.app = new Vue({
el: '#app',
data: {
cards: []
}
})
window.addEventListener("load", function(event) {
setTimeout(function () {
window.app.cards.push({id: 0, title: '1'})
}, 1000);
});
https://alligator.io/vuejs/stripe-elements-vue-integration/
On this website, it says we need to import the file with the script tag in the index.html file, which I did, but I noticed I get a js error.
It's only when I imported directly the script inside the component that the error "'Stripe' is not defined" disappeared.
<template>
<div>
</div>
</template>
<script src="https://js.stripe.com/v3/"></script>
<script>
export default {
name: 'component',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
I don't want to import it directly inside my component, because it's not clean, what can I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Late to the party, but here is a solution that works for me
Your index.html file looks fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://js.stripe.com/v3/"></script>
<title>vue-app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Then in the component where you want to use it, you can access stripe with the window object, and set the publishable key. This can be done locally in a method, or globally for the component, like this:
<script>
const stripe = window.Stripe(process.env.VUE_APP_STRIPE_PK)
export default {
data() {
return {
// ...
}
},
methods: {
async confirmPayment() {
const paymentResult = await stripe.confirmCardPayment(this.clientSecret, {
receipt_email: 'email#example.com',
})
console.log('paymentResult:', paymentResult)
},
},
}
</script>
I think you should move the script tag of Stripe before the rest of your JavaScript code. The code is probably trying to access the Stripe object before it's been loaded.