HTML <object> tag completely recreates the vue app i a new inline element

[calexandru2018]

Version

3.8.0

Reproduction link

https://github.com/calexandru2018/vuejs-SPA

Environment info

Environment Info:

  System:
    OS: Linux 4.19 Manjaro Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 12.9.1 - /usr/bin/node
    Yarn: Not Found
    npm: 6.11.3 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 69.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.8.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.8.0 
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0 
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0 
    @vue/cli-plugin-pwa: ^3.8.0 => 3.8.0 
    @vue/cli-service: ^3.8.0 => 3.8.4 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-cli-plugin-vuetify: ^0.5.0 => 0.5.0 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.3 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue2-touch-events: ^2.0.0 => 2.0.0 
    vuetify: ^1.5.16 => 1.5.16 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.11.0

Steps to reproduce

1. Create a Vue-Cli project with the default setup
   3.Add a image(svg) at your choice in the "assets" folder
   4.Create at the least one additional component that is not rendered/displayed on main page upon running "npm run serve" (with a v-if and a control variable)
   5.Insert the following code inside the newly created component: "<"object type="image/svg xml" data="../assets/[filename].svg"></object">" (remove the extra ")
   6.Call the component

What is expected?

It is expected that a object with the svg appears.

What is actually happening?

The whole Vue app is re-rendered inside itself, a sorts of inception.

---

Tested on three different projects, same result on all of them. I wanted to create an inline svg object so that it could be manipulated.

[LinusBorg]

Can't run it right now, but that's likely because

1. the path in the data attribute is not resolved by vue-loader(by default, only works for src on img etc.)
2. so it stays like it is - and `localhot:8080/../assets/..`` isn't a valid path
3. so the dev server re-routes the request to index.html
4. which gets rendered inside the <object>

Solution:

<"object type="image/svg xml" :data="require(../assets/[filename].svg)"></object">

[calexandru2018]

Can't run it right now, but that's likely because

1. the path in the data attribute is not resolved by vue-loader(by default, only works for src on img etc.)
2. so it stays like it is - and `localhot:8080/../assets/..`` isn't a valid path
3. so the dev server re-routes the request to index.html
4. which gets rendered inside the <object>

Solution:

<"object type="image/svg xml" :data="require(../assets/[filename].svg)"></object">

Thanks for the quick replay. As a follow-up, I implemented your solution and this time the object responds with the following text: "This plugin is not supported", printscreen attached if helps.

[LinusBorg]

1. Type should be image/svg+xml
2. What does the generated html look like when that Second error appears?

[calexandru2018]

1. Type should be image/svg+xml
2. What does the generated html look like when that Second error appears?

I changed to the type that you specified and the issue persisted as per first report.

When you mean second error, which one are you referring to ?

[LinusBorg]

I mean this:

the object responds with the following text: "This plugin is not supported",

[calexandru2018]

I mean this:

the object responds with the following text: "This plugin is not supported",

This is the code generated

<a data-v-6cfeddb4="" href="https://github.com/calexandru2018/portfolio" target="_blank"><img data-v-6cfeddb4="" src="/img/eye.7e78ce58.svg" alt="" class="eye"><object data-v-6cfeddb4="" type="image/svg xml" data="/img/eye.7e78ce58.svg"></object></a>

Edit: more specifically, <object data-v-6cfeddb4="" type="image/svg xml" data="/img/eye.7e78ce58.svg"></object> inside the a tag.

[calexandru2018]

Sorry for late response, I managed to test it a bit deeper and have fixed per your recommendation in

Type should be image/svg+xml

Thank you for the tip Linus, I am closing the issue.