How import mdi font to vutify? Below code does not working. I am using CDN.
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify({
icons: {
iconfont: 'mdi', //'mdiSvg', // || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
}
})
createApp({
delimiters: ['{-', '-}'],
data() {
return {
message: 'Hello Vue!'
}
}
}).use(vuetify).mount('#app')
In html:
<v-btn icon="mdi-dots-vertical" v-bind="props"></v-btn>
<v-icon>mdi-home</v-icon>
Add this to your index.html between <head> tags:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" />
Related
How to unload the script so that every time the component is mounted, it is loaded again.
<template>
<div id="root">
<component :is="App" />
</div>
</template>
<script setup>
import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue';
const App = ref(null);
onMounted(() => {
App.value = defineAsyncComponent(() => import('editor/App'));
});
onUnmounted(() => {
App.value = null;
});
</script>
Code like in my example does not do this. The component is unmounted, but the file is not reloaded during subsequent mounting.
This is the code from the config:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'consumer',
filename: 'remoteEntry.js',
remotes: {
editor: process.env.FRONTEND_EDITOR_URI,
},
}),
],
},
};
Any thoughts?
what I want to do is to send a value to the file "Notification.vue" when the button is clicked in the hello word file and I want to show Notification
toastify
helloword.vue
<template>
<button #click="toast">Toast it!</button>
</template>
<script>
export default {
name: "helloword",
methods: {
toast() {
}
}
}
</script>
Notification.vue
<script setup>
import {createToast} from 'mosha-vue-toastify';
import 'mosha-vue-toastify/dist/style.css'
const props = defineProps({title: String})
const toast = () => {
createToast(props.title)
}
</script>
I just created a demo with Vue 2 for your understanding how components will communicate. You can migrate this in Vue 3.
Demo :
Vue.use(VueToast, {
// global options
});
Vue.component('notification', {
props: ['title'],
mounted() {
if (this.title) {
this.$toast.open({
message: this.title,
type: "success",
duration: 5000,
dismissible: true
})
}
}
});
var app = new Vue({
el: '#app',
data: {
title: null,
},
methods: {
toast: function() {
this.title = 'Welcome!'
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification#0.6/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-toast-notification#0.6/dist/theme-sugar.css"/>
<div id="app">
<button #click="toast">Toast it!</button>
<notification v-if="title" :title="title"></notification>
</div>
If I use Vue2 with no build step, is there a way to use Vue-I18n the same way?
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n#8"></script>
</head>
<body>
<div id="vueApp"></div>
<script>
const VueI18n = window.VueI18n;
if (VueI18n) {
const i18n = new VueI18n({
locale: 'en',
messages: {
en: {
hello: 'Hello there!',
}
}
});
Vue.use(i18n);
}
new Vue({
template: '<div><p>This is Vue!</p><p>{{welcome}} and {{hello}}</p></div>',
el: document.querySelector('#vueApp'),
data: function() {
return {
welcome: 'Welcome',
hello: this.$t('hello'),
};
},
});
</script>
</body>
</html>
I hope to see
This is Vue!
Welcome and Hello there!
Instead, the dev console has the message
TypeError: Cannot read properties of undefined (reading '_t')
at Vue.$t (vue-i18n#8:242:19)
at Vue.data (vuei18.html:29:29)
at Vue.mergedInstanceDataFn (vue.js:1240:22)
at getData (vue.js:4758:19)
at initData (vue.js:4715:9)
at initState (vue.js:4654:7)
at Vue._init (vue.js:5014:7)
at new Vue (vue.js:5092:10)
at vuei18.html:23:5
Am I completely out of luck, or is there a way to make this happen?
Thanks for any help.
this.$t() is the same as t() from the VueI18n instance (i.e., the result of new VueI18n()), so you can use it here:
const VueI18n = window.VueI18n;
let i18n = null
if (VueI18n) {
👇
i18n = new VueI18n({⋯});
Vue.use(i18n);
}
new Vue({
â‹®
data: function() {
return {
welcome: 'Welcome',
👇
hello: i18n?.t('hello'),
};
},
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n#8"></script>
</head>
<body>
<div id="vueApp"></div>
<script>
const VueI18n = window.VueI18n;
let i18n = null
if (VueI18n) {
i18n = new VueI18n({
locale: 'en',
messages: {
en: {
hello: 'Hello there!',
}
}
});
Vue.use(i18n);
}
new Vue({
template: `<div><p>This is Vue!</p><p>{{welcome}} and {{hello}}</p></div>`,
el: document.querySelector('#vueApp'),
data: function() {
return {
welcome: 'Welcome',
hello: i18n?.t('hello'),
};
},
});
</script>
</body>
Here is a working Vue2 example:
<template>
<div>
<h1>O_o</h1>
<component :is="name"/>
<button #click="onClick">Click me !</button>
</div>
</template>
<script>
export default {
data: () => ({
isShow: false
}),
computed: {
name() {
return this.isShow ? () => import('./DynamicComponent') : '';
}
},
methods: {
onClick() {
this.isShow = true;
}
},
}
</script>
Redone under Vue3 option does not work. No errors occur, but the component does not appear.
<template>
<div>
<h1>O_o</h1>
<component :is="state.name"/>
<button #click="onClick">Click me !</button>
</div>
</template>
<script>
import {ref, reactive, computed} from 'vue'
export default {
setup() {
const state = reactive({
name: computed(() => isShow ? import('./DynamicComponent.vue') : '')
});
const isShow = ref(false);
const onClick = () => {
isShow.value = true;
}
return {
state,
onClick
}
}
}
</script>
Has anyone studied the vue2 beta version? Help me please. Sorry for the clumsy language, I use Google translator.
Leave everything in the template as in Vue2
<template>
<div>
<h1>O_o</h1>
<component :is="name"/>
<button #click="onClick">Click me !</button>
</div>
</template>
Change only in "setup" using defineAsyncComponent
You can learn more about defineAsyncComponent here
https://labs.thisdot.co/blog/async-components-in-vue-3
const isShow = ref(false);
const name = computed (() => isShow.value ? defineAsyncComponent(() => import("./DynamicComponent.vue")) : '')
const onClick = () => {
isShow.value = true;
}
Try this
import DynamicComponent from './DynamicComponent.vue'
export default {
setup() {
const state = reactive({
name: computed(() => isShow ? DynamicComponent : '')
});
...
return {
state,
...
}
}
}
The issue with this seems to be to do with the way we register components when we use the setup script - see the official docs for more info. I've found that you need to register the component globally in order to reference it by string in the template.
For example, for the below Vue component:
<template>
<component :is="item.type" :item="item"></component>
</template>
<script setup lang="ts">
// Where item.type contains the string 'MyComponent'
const props = defineProps<{
item: object
}>()
</script>
We need to register the component in the main.ts, as such:
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './MyComponent.vue'
var app = createApp(App);
app.component('MyComponent', MyComponent)
app.mount('#app')
Using 'watch' everything works.
<template>
<component :is="componentPath"/>
</template>
<script lang="ts">
import {defineComponent, ref, watch, SetupContext} from "vue";
export default defineComponent({
props: {
path: {type: String, required: true}
},
setup(props: { path: string }, context: SetupContext) {
const componentPath = ref("");
watch(
() => props.path,
newPath => {
if (newPath !== "")
import("#/" + newPath + ".vue").then(val => {
componentPath.value = val.default;
context.emit("loaded", true);
});
else {
componentPath.value = "";
context.emit("loaded", false);
}
}
);
return {componentPath};
}
});
</script>
I don't manage to get the locale parameter from vue-i18n in my child component.
I've installed vue-i18n in cli ui. The translation with $t("message") is working but I have error when i try to access to i18n.locale
my enter point (main.js)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
new Vue({
router,
i18n,
render: h => h(App)
}).$mount('#app')
my child component
<template>
<div>{{ $t("message") }}</div>
</template>
<script>
import {HTTP} from '#/http-common'
export default
{
name : 'c1',
methods:{
selectMap()
{
console.log(i18n.locale);//=> doesn't work
}
}
</script>
i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
Try this.$i18n.locale, or just $i18n.locale if inside the <template>.
For Composition API this is my solution:
<script setup>
import { useI18n } from "vue-i18n";
const i18nLocale = useI18n();
console.log(i18nLocale.locale.value); // "en"
</script>