I want to use vue material for my app,
i already install vue-material in my app, and do this in my main.js:
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)
but, when i use some component from vue-material in my index page like this:
<template>
<md-field>
<label>Username</label>
<md-input v-model="username"></md-input>
</md-field>
<md-field>
<label>Password</label>
<md-input v-model="password"></md-input>
</md-field>
</template>
my page show:
when i visit example form input in codepen, form input should like this:
whats wrong with my code?
This happened with me too,
To fix it, you just need to set a theme for your app like this:
import 'vue-material/dist/theme/default.css'
You are probably missing a crucial <form> tag
As per the documentation, removing some stuff for your use case, you should have at least the following wrapped around those <md-field> tags.
<form class="md-layout">
// your form inputs here
</form>
Related
i'm new of this framework :(
the problem is here because i've tried to put the component in another page and work it.
It sign error the component
this is my index.vue page
If you're using nuxt2.0, you should wrap them in a container but this is not needed in nuxt3.0.
<template>
<main>
<navbar />
<slideshow />
</main>
</template>
If this is nuxt2.0, then you should also import the component and register it but you haven't done it here. The path you've given to the component is not correct also.
<script>
import Slideshow from '~/components/slideshow.vue';
export default {
components: { Slideshow }
}
</script>
You need to wrap the into a div or any other tag (to not have multiple tags at the root of the template) like that
<template>
<div>
<navbar></navbar>
<slideshow></slideshow>
</div>
</template>
And you can also skip the import part because Nuxt is already doing that for you as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/
While designing client-rendering SPA, <teleport to="body"> of Vue3 works well.
I can teleport dialog component to <body>.
<--! dialog component example-->
<template>
<teleport to="body">
<div class="dialog">
<slot></slot>
</div>
</teleport>
</template>
However, it's failed when I try to use the same way in Nuxt static mode.
Does Nuxt support "teleport" method?
Is there any other workaround dealing with teleport in Nuxt static application?
Portals/Teleport arrived with Vue 3. This is not yet supported in Nuxt, as it is still running on v2. If necessary, you can likely find alternative third party packages for this in the meantime.
I may misunderstand what you're looking for but one solution is using <ClientOnly>. Most of the time we only need to render Modal in client-side (without SSR) anyway.
<template>
<div class="modal_container">
<ClientOnly>
<Teleport to="body">
<div class="modal">
Hello World
</div>
</Teleport>
</ClientOnly>
</div>
</template>
I'm new to Vue and I'm looking at an existing code that makes me question, where do the tags <u-col> and <u-row> come from?
My very little understanding of Vue so far is that you can create custom components and then use those components like html tags in the template. But my understanding is that if the component is to be used then it must be exported from where it is created and then imported at where it is being used.
Below is a part of the code that I'm not sure if <u-col> or <u-row> are custom made tags or if they're simply default vue tags? I don't think they're custom tags because I don't see any imports and I haven't found anything in the source code that tells me they are custom tags. But I don't think they are default vue tags either because I haven't seen them from my google searches. The closest I've come to is the <b-col> tag but I know that is from bootstrap.
<template>
<u-row class="mb-4 flex-nowrap">
<u-col class="text-sm text-700 text-right col-2 mr-4">
<span v-if="required" class="text-warning">*</span>{{label}}
</u-col>
<u-col>
<slot />
</u-col>
</u-row>
</template>
<script>
export default {
props: {
label: {
type: String
}
}
</script>
<style>
</style>
Any help is appreciated.
many of the FilePond property seem to not show an effect, but there are even some that render the component unusable. tried on codepen with the default example.
As soon as I add the following line:
stylePanelLayout='compact circle'
to the component it doesn't react anymore to file selects
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
v-bind:files="myFiles"
stylePanelLayout='compact circle'
/> </div>
</template>
you can try urself by adding this line to the demo from FilePond:
https://codesandbox.io/s/github/KimGenius/Vue-FilePond-Live-Demo/tree/master/?from-embed
please set allow-multiple to false to fix the issue. Might not be clear from the docs that this is necessary.
In other words one might have an html at some point which looks like this:
<bloglink blogposturl="http://a.link" blogposttitle="my title" ></bloglink>
And the template attribute like so:
...
template: '<h3><i><a style="text-decoration: underline; cursor: pointer;" v-on:click="load_blog_page(blogposturl)">{{blogposttitle}}</a></i></h3>',
...
But what if one wanted to express instead
<bloglink blogposturl="http://a.link" blogposttitle="my title" >
<p>.....complex html in here.... which is not dynamic....</p>
</bloglink>
One would want to keep this html when loading the webpage instead of being completely replaced.
One way would be to take this complex html and insert it as a parameter being careful with escaping properly etc. but this does not seem very elegant.
What is the recommended way?
Vue component slot.
for example:
ParentComponent:
<template>
<div>
<slot></slot>
</div>
</template>
SomeOtherComponent:
<template>
<div>
<parent>
<p>whatever</p>
</parent>
</div>
</template>