I'm trying to build a basic toolbar with Polymer 2.0 RC using app-toolbars and paper-tabs. I created the header according to the documentation and added paper-tabs for the bottom app-toolbar, but they're not visible.
I imported all elements correctly
I tried to set the height of the second app-toolbar to 100%
I tried to just use paper-tabs in the main document, but they don't show either
It does not work in either chrome or FF
Any help is appreciated! Thanks!
my code:
<app-drawer-layout fullbleed>
<!-- app-headers -->
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed shadow condenses effects="waterfall">
<app-toolbar id="topbar">
<paper-icon-button icon="app-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>WASC Hosting</div>
<paper-icon-button icon="app-icons:code"></paper-icon-button>
<paper-icon-button icon="app-icons:search"></paper-icon-button>
<paper-progress value="10" indeterminate bottom-item></paper-progress>
</app-toolbar>
<app-toolbar>
<paper-tabs selected="0">
<paper-tab>Food</paper-tab>
<paper-tab>Food</paper-tab>
<paper-tab>Food</paper-tab>
</paper-tabs>
</app-toolbar>
</app-header>
<!-- view contents -->
<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view-404" role="main">
<wasc-view-main name="main" class="content"></wasc-view-main>
<wasc-view-console name="console" class="content"></wasc-view-console>
<wasc-view-products name="products" class="content"></wasc-view-products>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
Look at Polymer 2.0 installation Documentation.
Have you installed paper-tabs with bower correctly?
bower install --save PolymerElements/paper-tabs#2.0-preview
Look at my bower.json:
"dependencies": {
"app-layout": "PolymerElements/app-layout#2.0-preview",
"app-route": "PolymerElements/app-route#2.0-preview",
"iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
"iron-icon": "PolymerElements/iron-icon#2.0-preview",
"iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
"iron-pages": "PolymerElements/iron-pages#2.0-preview",
"iron-selector": "PolymerElements/iron-selector#2.0-preview",
"paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
"paper-tabs": "PolymerElements/paper-tabs#2.0-preview"
"polymer": "Polymer/polymer#^2.0.0-rc.1",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.4"
},
"resolutions": {
"polymer": "^2.0.0-rc.1"
},
Related
im working on a nuxt project and im using vuetify as a UI framework.
i tried using v-otp-input but i get this error in my console.
all the vuetify elements are working fine but this one doesn't , what should i do ?
here is my code
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
ps:im looking for somthing like this:
Any help would be appreciated
that was because of vuetify version (vuetify version must be 2.6.0 or higher)
for updating vuetify:
1.Run npm info vuetify to lookup for the list of versions that they have.
npm info vuetify
2.install the specific version that you want with the following
for example:
npm install --save vuetify#2.6.6
You can use Vuetify <v-opt-input> component and override a bit its css for your needs.
<v-otp-input
length="6"
plain
type="number"
></v-otp-input>
To edit the css style of the component, it's not an easy task as you have to check on the browser debugger what are the classes applied to the component and what elements it includes.
But it's doable :)
Assuming you are using the last Vuetify version (2.6.6) you have to wrap your page or your layout into a component: https://vuetifyjs.com/en/api/v-app/
<template>
<v-app>
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
</v-app>
</template>
I had the same problem, using vuetify v2.6.9, with vue-cli-plugin vuetify. I tried manually importing the component in my component and it worked:
<template>
<v-otp-input
class="
font-weight-bold
text-uppercase
btn-primary
bg-gradient-primary
py-2
px-6
me-2
mt-7
mb-2
w-100
"
color="#5e72e4"
v-model="otp"
:disabled="loading"
#finish="onFinish"
></v-otp-input>
</template>
<script>
import { VOtpInput } from "vuetify/lib";
export default {
name: "sign-up-verify",
components: { VOtpInput },
}
</script>
I'm writing here, because I cannot find the response, or better, I found myself unable to formulate proper question to find it.
My question is:
Given the App.vue structure: (simplified)
<v-main>
<v-container fluid fill-height>
<router-view />
</v-container>
</v-main>
and the Component.vue structure:
<v-row>
<v-col>
Component Content
</v-col>
</v-row>
Why is the rendered component wrapped with the plain <v-container>?:
<main class="v-main" style="padding: 64px 0px 0px;">
<div class="v-main__wrap">
<div class="container container--fluid fill-height"> // App.vue
<div class="container"> // ????
<div class="row"> // component code
<div class="col">
Is it some secret vue-router or vuetify template?
Could anyone explain why this happens and if there is a way to avoid this?
Edit: versions:
Dependencies:
req: inst:
core-js ^3.8.3 3.21.1
vue ^2.6.14 2.6.14
vue-router ^3.5.1 3.5.3
vuetify ^2.6.0 2.6.4
vuex ^3.6.2 3.6.2
Dev dependencies:
req: inst:
#babel/core ^7.12.16 7.17.7
#babel/eslint-parser ^7.12.16 7.17.0
#vue/cli-plugin-babel ~5.0.0 5.0.3
#vue/cli-plugin-eslint ~5.0.0 5.0.3
#vue/cli-plugin-router ~5.0.0 5.0.3
#vue/cli-plugin-vuex ~5.0.0 5.0.3
#vue/cli-service ~5.0.0 5.0.3
eslint ^7.32.0 7.32.0
eslint-plugin-vue ^8.0.3 8.5.0
sass ~1.32.0 1.32.13
sass-loader ^10.0.0 10.2.1
vue-cli-plugin-vuetify ^2.4.7 2.4.7
vue-template-compiler ^2.6.14 2.6.14
vuetify-loader ^1.7.0 1.7.3
Ok, my bad, I didn't realize that it was because the parent component of this particular subview <v-container> wasn't marked as fluid.
All fixed now. Since the parent was only a template with a container and a router-view without any logic, I'd completely forgotten about it.
I like to use MountingPortal to teleport an element (later a Component) to <body>. But the element is not moved to the target.
Setup
Create a Vue app with vue create portal-test and choose Vue 2 and all defaults
Add Vue-Portal: npm install --save portal-vue
Edit main.js: add import PortalVue from 'portal-vue' and Vue.use(PortalVue)
In packages.json under "dependencies" I've found "portal-vue": "^2.1.7",
Add portal target in public/index.html
In the body I add a div with id target-id that should be treated as a portal target:
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<hr />
<div id="target-id">
Hey
</div>
<hr />
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
Change App.vue
<template>
<div id="app">
<MountingPortal name="destination" mountTo="#target-id">
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
Expected output
The <p>This should be rendered outside</p> should displayed between the two <hr />.
Actual output
The <p>...</p> is missing in the DOM. I've tested in Firefox and Edge, the DOM looks the same.
Ah, ok, a <portal-target> must be wrapped in <MountingPortal>.
This works:
<template>
<div id="app">
<MountingPortal mountTo="#target-id">
<portal-target name="destination" />
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
In my template I am using code
<img src="#/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
OR
<img src="./assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
It gives the following error
This dependency was not found:
* #/assets/images/logo-icon.png in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Header.vue?vue&type=template&id=61dd7a3d
Tried using url loader in vue.config.js still the same issue
UPDATE: Solved
Simply using <img src="/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> instead of <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
Solved my problem,. and # doesn't work with the latest Vue version I guess and it wasn't also in the documentations.
have you tried with require?
For example:
<img :src="require('#/assets/images/logo-icon.png')" />
I want to display tweets like card-columns in my page.
I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly.
in main.js
import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';
in html
<head>
//....
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
</head>
in template
<div class="grid">
<div class="grid-item" v-for="i in topics">
<Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
</div>
</div>
I have used vue-masonry.
(We need to take care of redraw method this.$redrawVueMasonry(); on update or change.)