Styjun

Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)

How to write a macro that is braces sensitive?

How to format long polynomial?

LaTeX closing $ signs makes cursor jump

Is it important to consider tone, melody, and musical form while writing a song?

Why does Kotter return in Welcome Back Kotter?

Can divisibility rules for digits be generalized to sum of digits

"You are your self first supporter", a more proper way to say it

In Japanese, what’s the difference between “Tonari ni” (となりに) and “Tsugi” (つぎ)? When would you use one over the other?

strToHex ( string to its hex representation as string)

can i play a electric guitar through a bass amp?

Did Shadowfax go to Valinor?

Fencing style for blades that can attack from a distance

Mathematical cryptic clues

Can a Warlock become Neutral Good?

What do you call a Matrix-like slowdown and camera movement effect?

Languages that we cannot (dis)prove to be Context-Free

Today is the Center

Font hinting is lost in Chrome-like browsers (for some languages )

Maximum likelihood parameters deviate from posterior distributions

Show that if two triangles built on parallel lines, with equal bases have the same perimeter only if they are congruent.

How much RAM could one put in a typical 80386 setup?

How does one intimidate enemies without having the capacity for violence?

Which models of the Boeing 737 are still in production?

Vuejs how to declare a component in HTML before the #app

How do I detect a click outside an element?Where should I put <script> tags in HTML markup?How do I declare a namespace in JavaScript?How to decide when to use Node.js?Is the recommendation to include CSS before JavaScript invalid?How to pass props to this.props.childrenWhy use Redux over Facebook Flux?Vue.js - How to properly watch for nested dataSmoothScroll between components. VueJsVue.js - How to add components inside rendered HTML

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

For some reason I need to render a component in html, right before the div with the id #app which is needed by Vue.js to run.

Is that even possible?

javascript vue.js vuejs2 vue-component

share|improve this question

asked Mar 22 at 0:08

Matt E.Matt E.

881210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why? Can you not use CSS to position it wherever you want?
  
  – Phil
  Mar 22 at 0:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You make an excellent point and I thought about that. It's just that it's too much work to be done and CSS isn't quite my thing, so I wanted to ask if there's an easy way out of this..
  
  – Matt E.
  Mar 22 at 0:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I dont know for what reason you ask this.. but you can add a component before #app . for example try like this... in the component mounted mounted() let target = document.body; target.insertBefore(this.$el, target.firstChild)
  
  – dagalti
  Mar 22 at 1:51
  
  

  
  
  
  

add a comment | 

2

For some reason I need to render a component in html, right before the div with the id #app which is needed by Vue.js to run.

Is that even possible?

javascript vue.js vuejs2 vue-component

share|improve this question

asked Mar 22 at 0:08

Matt E.Matt E.

881210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why? Can you not use CSS to position it wherever you want?
  
  – Phil
  Mar 22 at 0:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You make an excellent point and I thought about that. It's just that it's too much work to be done and CSS isn't quite my thing, so I wanted to ask if there's an easy way out of this..
  
  – Matt E.
  Mar 22 at 0:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I dont know for what reason you ask this.. but you can add a component before #app . for example try like this... in the component mounted mounted() let target = document.body; target.insertBefore(this.$el, target.firstChild)
  
  – dagalti
  Mar 22 at 1:51
  
  

  
  
  
  

add a comment | 

For some reason I need to render a component in html, right before the div with the id #app which is needed by Vue.js to run.

Is that even possible?

javascript vue.js vuejs2 vue-component

share|improve this question

asked Mar 22 at 0:08

Matt E.Matt E.

881210

share|improve this question

asked Mar 22 at 0:08

Matt E.Matt E.

881210

share|improve this question

asked Mar 22 at 0:08

Matt E.Matt E.

881210

asked Mar 22 at 0:08

Matt E.Matt E.

881210

asked Mar 22 at 0:08

Matt E.Matt E.

881210

2 Answers
2

active

oldest

votes

2

in Child component mounted you can insert the element before #app

 mounted() 
 document.body.insertBefore(this.$el, document.body.firstChild)
 

Jsfiddle : https://jsfiddle.net/rk5ytqs3/

share|improve this answer

answered Mar 22 at 3:35

dagaltidagalti

73036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for sharing! This worked for me!
  
  – Matt E.
  Mar 22 at 20:24
  

  
  
  
  

add a comment | 

1

You can use portal-vue to do that. There is example of how to render outside of the Vue app:

Rendering outside of the Vue-App

 <div id="app">
 <portal target-el="#widget">
 <p>
 PortalVue will dynamically mount an instance of <portal-target> in place of the Element
 with `id="widget"`, and this paragraph will be rendered inside of it.
 </p>
 </portal>
 </div>
 <script>
 new Vue(el: '#app')
 </script>
 <aside id="widget" class="widget-sidebar">
 This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
 </aside>
</body>

share|improve this answer

answered Mar 22 at 3:40

blazblaz

1,834918

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55290995%2fvuejs-how-to-declare-a-component-in-html-before-the-app%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

in Child component mounted you can insert the element before #app

 mounted() 
 document.body.insertBefore(this.$el, document.body.firstChild)
 

Jsfiddle : https://jsfiddle.net/rk5ytqs3/

share|improve this answer

answered Mar 22 at 3:35

dagaltidagalti

73036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for sharing! This worked for me!
  
  – Matt E.
  Mar 22 at 20:24
  

  
  
  
  

add a comment | 

2

in Child component mounted you can insert the element before #app

 mounted() 
 document.body.insertBefore(this.$el, document.body.firstChild)
 

Jsfiddle : https://jsfiddle.net/rk5ytqs3/

share|improve this answer

answered Mar 22 at 3:35

dagaltidagalti

73036

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for sharing! This worked for me!
  
  – Matt E.
  Mar 22 at 20:24
  

  
  
  
  

add a comment | 

in Child component mounted you can insert the element before #app

 mounted() 
 document.body.insertBefore(this.$el, document.body.firstChild)
 

Jsfiddle : https://jsfiddle.net/rk5ytqs3/

share|improve this answer

answered Mar 22 at 3:35

dagaltidagalti

73036

 mounted() 
 document.body.insertBefore(this.$el, document.body.firstChild)
 

share|improve this answer

answered Mar 22 at 3:35

dagaltidagalti

73036

answered Mar 22 at 3:35

dagaltidagalti

73036

answered Mar 22 at 3:35

dagaltidagalti

73036

1

You can use portal-vue to do that. There is example of how to render outside of the Vue app:

Rendering outside of the Vue-App

 <div id="app">
 <portal target-el="#widget">
 <p>
 PortalVue will dynamically mount an instance of <portal-target> in place of the Element
 with `id="widget"`, and this paragraph will be rendered inside of it.
 </p>
 </portal>
 </div>
 <script>
 new Vue(el: '#app')
 </script>
 <aside id="widget" class="widget-sidebar">
 This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
 </aside>
</body>

share|improve this answer

answered Mar 22 at 3:40

blazblaz

1,834918

add a comment | 

1

You can use portal-vue to do that. There is example of how to render outside of the Vue app:

Rendering outside of the Vue-App

 <div id="app">
 <portal target-el="#widget">
 <p>
 PortalVue will dynamically mount an instance of <portal-target> in place of the Element
 with `id="widget"`, and this paragraph will be rendered inside of it.
 </p>
 </portal>
 </div>
 <script>
 new Vue(el: '#app')
 </script>
 <aside id="widget" class="widget-sidebar">
 This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
 </aside>
</body>

share|improve this answer

answered Mar 22 at 3:40

blazblaz

1,834918

add a comment | 

You can use portal-vue to do that. There is example of how to render outside of the Vue app:

Rendering outside of the Vue-App

 <div id="app">
 <portal target-el="#widget">
 <p>
 PortalVue will dynamically mount an instance of <portal-target> in place of the Element
 with `id="widget"`, and this paragraph will be rendered inside of it.
 </p>
 </portal>
 </div>
 <script>
 new Vue(el: '#app')
 </script>
 <aside id="widget" class="widget-sidebar">
 This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
 </aside>
</body>

share|improve this answer

answered Mar 22 at 3:40

blazblaz

1,834918

 <div id="app">
 <portal target-el="#widget">
 <p>
 PortalVue will dynamically mount an instance of <portal-target> in place of the Element
 with `id="widget"`, and this paragraph will be rendered inside of it.
 </p>
 </portal>
 </div>
 <script>
 new Vue(el: '#app')
 </script>
 <aside id="widget" class="widget-sidebar">
 This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
 </aside>
</body>

share|improve this answer

answered Mar 22 at 3:40

blazblaz

1,834918

answered Mar 22 at 3:40

blazblaz

1,834918

answered Mar 22 at 3:40

blazblaz

1,834918