In Vue 3, when I register a component to use, I use the following in my .js file:
import blogpost from '../../../blogpost.vue'
app.use(blogpost);
I create a simple component, i.e. BlogPost.vue.
<!-- BlogPost.vue -->
<template>
<h4>{{ title }}</h4>
</template>
<script>
export default {
name: 'BlogPost',
props: ['title']
}
</script>
In my html file, I call the following:
<div id="app">
<blogpost title = 'test'/>
</div>
When I run the app, I get the following:
runtime-core.esm-bundler.js?fea0:38 [Vue warn]: Failed to resolve
component: blogpost.
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
It's like Vue can't render the component. I am using webpack to compile, so if I put the wrong location in, it errors out. So the location is right, I guess?
Is there something I am doing wrong?
I don't know whether you have solved this, anyway, here is the answer. Use app.component() to globally register a component (look here).
Related
I'm getting this super confusing Vue warning and I can't figure it out:
[Vue warn]: Property "me" was accessed during render but is not defined on instance.
at <UserReputation user= {reputation: {…}, _id: '638f81dbb288267e6340ddbc', username: 'artsborba'…} class="mt-1" >
...
Here on StackOverflow I can find more topics with this warning, but seems each one is a different case, and mine is just not making sense! My vue version is ^3.1.0, vuetify ^3.1.0 and vite ^2.5.4.
My component looks like:
// MyComponent.vue
<v-menu location="end" location-strategy="connected">
<template #activator="{ props }">
<div
v-bind="props"
class="user-info-container cursor-pointer"
>
<UserAvatar
:user="me"
/>
<div v-if="me" class="user-data">
<div class="username-row">
{{ me.username }}
<AppIcon
icon="downward-arrow"
color="primary"
class="user-menu-icon"
:class="{ 'is-active': props['aria-expanded'] === 'true' }"
/>
</div>
<!-- HERE WE HAVE THE WARNING SOURCE -->
<UserReputation :user="me" class="mt-1" />
</div>
</div>
</template>
...
</v-menu>
In the same component I have the me set as a prop:
props: {
me: {
validator: prop => typeof prop === 'object' || prop === null,
required: true
}
},
Now, please notice that in the same component I have another one using this me pro (<UserAvatar :user="me"...>), which doesn't trigger this warning. Only the <UserReputation... component usage does! If I comment out the <UserReputation... tag, the warning goes away.
I already tried placing this me as a computed value instead of a prop, directly inside MyComponent.vue (it comes from a Pinia store) and many other structures with no success. Hopefuly someone can help on this! Thanks in advance.
Maybe you are accesing at me property inside your UserReputation component, but in the parent you are passing me to user prop, like this :user="me", so... you need to access to user prop instead me prop inside UserReputation component.
If this answer doesn't resolve the question, please share us the structure of UserReputation component.
When I use element-plus to create an icon component, I use unplugin-icons and unplugin-auto-import to automatically import icons, for example I use <el-icon><i-ep-monitor />< /el-icon> to import an icon component. Now I have a requirement, I have an array which stores some strings like ['i-ep-avatar', 'i-ep-cellphone', 'i-ep-apple'], now what can I pass The method converts the strings in this array into components and dynamically adds them to the vue template. I hope to get your help.
<template>
<el-icon>
<i-ep-monitor />
</el-icon>
</template>
When I write like this, it can be imported normally
<template>
<el-icon>
{How should I dynamically generate a component like <i-ep-monitor /> from the string content in the array?}
</el-icon>
</template>
You can use <component> for that
details: https://vuejs.org/api/built-in-special-elements.html#component
example:
<template>
<el-icon>
<component :is="myIcon"/>
</el-icon>
</template>
where myIcon would return a string like i-ep-monitor
I have a problem displaying the standard Meteor user accounts login template {{> atForm }} in my React based Meteor application.
I am using a wrapper component to display Blaze based templates in my React application. I am trying to implement the standard login form of Meteors useraccounts package. But when I am using {{> atForm }} in the Blaze Template the login form is not displayed. But when I lock a specific state like {{> atForm state='signUp'}} then the form is displayed.
Wrapper Component
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
export default class AccountsUI extends Component{
componentDidMount() {
this.view = Blaze.render(Template.LoginTemplate,
ReactDOM.findDOMNode(this.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render () {
return <span ref={(ref) => this.container = ref} />
}
}
Blaze Template
<template name="LoginTemplate">
{{> atForm }} //Not displayed
{{> atForm state='signUp'}} // Displayed
</template>
But also other internal states like {{> atForm state='signIn'}} are not displayed as well.
Packages in .meteor
useraccounts:unstyled
accounts-password
Do you have a suggestion why this is the case and how I can resolve this problem ?
Thanks in advance.
Answer is solved by myself. The problem was, that I was already logged in when i rewrote my code. So the only thing that was missing was to log out. So if anyone has the same problem, always check if you are already logged in, in your application. If so, be sure to log out, before adding the {{> atForm}} into your template.
Uninstalling accounts-ui seemed to fix this for me in my case
it works perfectly when I make it like this
<body>
{{> carousel}}
</body>
<Template name="carousel">
....here the code of carousel...
</Template>
but when I use iron-router to render the Template; it does not render carousel
<body>
{{rendreRouter}}
</body>
<Template name="carousel">
....here the code of carousel...
</Template>
Router.map(function () {
this.route('carousel',{
path: '/'
});
});
I'm coming to the conclusion that the documentation you're reading is not in sync with the code base. In fact, it looks like the feature is gone.
In my own exploration of the topic, I have an alternate solution at that may work for you at the bottom of this post.
Init your carousel in template.rendered hook, for example my template is named main_slider.
Template.main_slider.rendered = function() {
// init carousel here
};
I've a tab bar on a responsive app I'm building:
<template name="tabNav">
<nav class="bar bar-tab">
<a class="tab-item" id="groups-nav" href="{{pathFor 'groupsList'}}">
<span class="icon icon-star-filled"></span>
<span class="tab-label">Groups</span>
</a>
<a class="tab-item active" id="games-nav" href="{{pathFor 'locationSet'}}">
<span class="icon icon-list"></span>
<span class="tab-label">Games</span>
</a>
<!-- more code -->
</template>
The pathFor 'groupsList' works on desktop, but not on mobile. You can try it out here: pp-groups.meteor.com.
This is a prototype only and doesn't use any real data. All of my views code is available here: https://github.com/stewartmccoy/pp-groups/tree/master/groups/client/views
These are my defined routes:
Router.map(function() {
this.route('layout', {
path: '/',
template: 'getLocation',
layoutTemplate: 'getLocation',
yieldTemplates: {
'tabNav': {to: 'footer'}
}
});
this.route('locationSet', {
path: '/locationSet',
template: 'locationSet',
layoutTemplate: 'locationSet'
});
this.route('groupsList', {
path: '/groupsList',
template: 'groupsList',
layoutTemplate: 'groupsList'
});
});
Why doesn't the pathFor work on mobile? (It at least doesn't work in Xcode iOS simulator or on iPhone Mobile Safari or Chrome).
The push.js component is causing the issue. You can still use Rachet with Iron Router by disabling push.js. Per rachet's documention you can disable push by adding a data-ignore tag to your HTML link.
<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>
Routing issue:
Removing the ratchet package fixed it for me. Looks like ratchet uses it's own way of linking between templates which is incompatible with iron-router. Removing ratchet removes the UI elements, but the routing works on mobile: http://pp-groups-fixed.meteor.com. You could use a strictly UI library, like bootstrap to make the UI elements, or maybe even just the ratchet's UI components. If you want to fully use ratchet, you will most likely have to forgo IronRouter.
Other things to fix:
Layout Templates
When using meteor and iron-router, a layout template is a template with common elements, with a {{> yield}} placed where you want the regular templates to show up.
You actually only have one real layout template in your code, in groups.html there is a layout template named layout, and it is unused.
In your code, regular templates are being misused as layout templates, because they don't have {{> yield}} in them. Also, the tabNav template is being placed using iron-router, yet you have already included it in each template with {{> tabNav}}.
So, you can simply get rid of the layout template code in your iron router, and your app will still function:
Router.map(function() {
this.route('layout', {
path: '/',
template: 'getLocation',
// layoutTemplate: 'getLocation',
// yieldTemplates: {
// 'tabNav': {to: 'footer'}
// }
});
this.route('locationSet', {
path: '/locationSet',
template: 'locationSet',
// layoutTemplate: 'locationSet'
});
this.route('groupsList', {
path: '/groupsList',
template: 'groupsList',
// layoutTemplate: 'groupsList'
});
});
A better way is to take out all the common code, the header, general structure of the page, tab bar, and put it in a layout template. Add a {{> yield}} where you want the page template to render. Refer to this layout template in your router as layoutTemplate.
Another sidenote, iron-router automatically looks for the template with the same name as the route, if no template is defined. So if you are writing this.route('groupsList', ... you don't need to write template: 'groupsList' as well.
Data
Your past-game.js file should be named get-location.js. Yes, the name itself doesn't matter, but that is getLocation's complimentary code, not postGame's. Same with scheduled-games.js and locationSet. Look at the Template.templateName.helpers to see how the code corresponds.
Of course, ideally this data should be in a collection. For now, instead of creating the data as arrays with var, you could create a seperate file with your data as global variables. Simply define as PastGames = [...], then use the template helpers to return the data you need.