0

How can we replace a component tag to render HTML code in view-source?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="JDhrGe3ZRLyJxubtyNLnjqDEedb70f62Z2S6Y93C">

    <title>Laravel</title>    

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="http://localhost/laravel_vue/public/css/app.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <example-component></example-component> // Need html code here
    </div>

    <!-- Scripts -->
    <script src="http://localhost/laravel_vue/public/js/app.js" defer></script>
</body>
</html>

I wan to display the Html code on behalf of component tag.

Dwarkesh Soni
  • 289
  • 3
  • 16

2 Answers2

1

The "View Page Source" feature of web browsers only displays the source of the HTML document it received from the server. Single Page Apps (SPAs) use JavaScript heavily to modify the DOM way beyond what little contents the HTML document had initially.

I'm not aware of any feature to display the "rendered" page source except for the following:

  • Open the dev tools and use the Inspector to view the current state of the DOM tree. From here you can copy the outer HTML of the <html> element to the clipboard if you want to extract it.
  • There is a View Rendered Source Chrome extension that looks to do what you want (untested).
Decade Moon
  • 32,968
  • 8
  • 81
  • 101
  • Thanks for your reply. I can see HTML via inspect element but I want to see all HTML when check view source using ctl+u. And also the main thing, In component render all passing data display in a component tag. I want to hide this and display html. – Dwarkesh Soni Mar 14 '20 at 09:16
0

Try using nuxt, which serves readable html files when building and serving vue apps. You can as well install vue devtools for web browser then just click Ctrl+Shift+J and select Vue. It's worth to mention that vue devtools works only on dev server.

kapsztat12
  • 85
  • 1
  • 5