Im looking for a way to click on an HTML element in the rendered webpage in Chrome of my Vue.js app (running in dev mode) and see the line of code in the corresponding .vue file that generated it. Is there a way to do this with Vue devtools? If not, could I write an npm plugin to go through and maybe add a unique property to each HTML element in my code, to allow for the mapping to be defined?
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
Apologies if this explanation isn't super clear. I am new to VueJS and I will do my best to explain my predicament.
I am building an application that imports html from external files into a component using v-html. I achieved that without any problems. However, the html has a bunch of asset urls that start with a /. What I want to do is to ensure that every asset url that starts with a / has a baseURL placed in front of it, converting it from say '/some-folder/some-asset.jpg' to '../../static/some-folder/some-asset.jpg' automatically without me having to programmatically modify the url.
I have tried modifying settings in the configuration file index.js, namely by trying different urls in assetsSubDirectory and assetsPublicPath but without success.
This is an example of a node in the imported html:
<picture>
<source media="(min-width: 768px)"srcset="/media/3974/cover_tablet.jpg">
<img id="img_20921" src="/media/3973/cover-mobile.jpg" class="img-fluid">
</picture>
I am trying to change the src value of:
/media/3974/cover_tablet.jpg
to:
../../static/media/3974/cover_tablet.jpg
by setting a base URL in the vue configuration but it won't prepend ../../static to the url and therefore the app cannot find the relevant asset.
The only way I managed to get this to work is by using JQuery to look for "src:" strings in the imported html and then prepend the baseURL into the link. This isn't at all ideal though and what I really want to achieve is for any link that starts with a "/" to have the apps baseURL prepended to it automatically.
I am starting to wonder if it is even possible for urls in imported html to pick up the apps baseURL value?
I found a solution. I was using the webpack template for my project which proved to make this particular issue difficult to work out so I reset my project using the Vue CLI template instead, put all my assets in the public folder and all the links in my imported html were picked up immediately with no fuss and no messing around with webpack configuration.
I have a project where I have placed the external js files like jquery, datepicker etc in the 'static' folder. I am importing them in the index.html file.
It is getting picked correctly when the page is directly loaded. But when navigating to the page using $this.router.push('/dashboard') the javascript does not get picked up.
Not sure if I am missing something here
I don't know how this vuejs project render data to the web browser. Can anyone help me to explain this?
Link url: https://github.com/huytrongnguyen/vue-cms
Notice: you have to clone this project to your computer.
Vue loader in the webpack config will change all of the components into Javascript. That JS is loaded when the index.html in the dist folder is opened in a browser. After the javascript is parsed, it'll run and populate the DOM with HTML strings created by the webpack process