I build with vue-cli webpack and use npm.
I just took this template and used it as it is.
However, the execution screen is broken and the images are not visible.
I have confirmed that images have been loaded from Chrome.
"[Vuetify] v-ripple can only be used on block-level elements".
What can I try?
this is
import "vuetify/dist/vuetify.min.css";
copy this link in you app.js file before importing vuetify.
Related
I'm trying to create a Web Component using vue + vuetify.
I know that vuetify doesn't support web components, but I decided to give it a try (for sport) anyway.
Apart from some minor things, like having to manually import CSS, or manually register all vuetify components, everything seems to work fine.
There's however one big obstacle that I hit, which is trying to use <v-menu> in a web component. After being built, the button simply does nothing once it's clicked. I only get one warning in the console:
console.ts:34 [Vuetify] Unable to locate target [data-app]
I already tried making sure data-app is present, but to no avail.
I'm building the web component using:
npx vue-cli-service build --target wc --name tl-test --inline-vue
When I compare the vue project (ran via yarn serve) to the web component output (dist/demo.html), I can see that when I click the v-menu trigger button, the DOM of the dropdown gets created and appended to the page DOM. This doesn't seem to happen with the web component.
What am I missing that would prevent <v-menu> from working?
Repository reproducing the issue: https://github.com/samupl/vuetify-webcomponent-issue
You can pass a HTML node to the attach prop of the v-menu.
This will prevent Vuetify from using a query selector which wouldn't work with shadow DOMs.
For example:
<v-menu :attach="$parent.$el">
...
</v-menu>
So i have initiated a project with Ionic Vue and I would like to know how can i implement AR.js into it. I have tried creating a simple html file containing the code of importing and then put an iframe into the ion-content of the Home.vue file but nothing
I'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'.
Once I build npm run build the project, these styles are not applied anymore.
I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.
Anybody experienced the same and found official solution?
Examples below:
Live https://www.exchangehours.com/
Local Dev (sorry, no public domain)
The problem was in my lack of knowledge of VuetifyJs and te Vue itself.
# What I used
<div class="container"> </div>
# What needs to be used
<v-container> </v-container>
I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files.
Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.
So all works perfectly fine if you follow docs completely.
I need to use font-awesome in my vue project to show some icon.
First, I installed font-awesome in my project.
npm install font-awesome --dev-save
After installed, it didn't work, just displayed as a square instead icon.
The error reason is the font file for font-awesome can't be loaded successfully.
After investigation, I copied these font file to a new folder, and reset the variable $fa-font-path's value, like below:
// reset font-awesome variables
$fa-font-path: '/src/common/fonts'
And it works well. Hope could help.
You should be able to use the fonts just by including
import 'font-awesome/css/font-awesome.min.css
in main.js.