F7 HTML pages loading concept

Hi, I would like to find out, from the below , simple F7 initialization,

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

at the routes the html page , /about/ , about.html,
which i check from most F7 samples, the content will look something like this …

<template>
      <div class="page page-gray" data-name="about">
        ...
      <div>
</template>

<script>
    return {
          data() {
                    return { ... }
          },
         methods: { 
              ...
        } ,
        on: { ... } 
    }
</script>

my question is that is that possible the about.html also can be as follow ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <noscript>Your browser does not support JavaScript!</noscript>
    <link rel="icon" href="data:;base64,=">
    <title>about</title>
    
    <style>
         ...
    </style>
  </head>

  <body>
    <template>
          <div class="page page-gray" data-name="about">
            ...
          <div>
    </template>
  </body>

  <script type="text/javascript">
        return {
              data() {
                        return { ... }
              },
             methods: { 
                  ...
            } ,
            on: { ... } 
        }       
  </script>
</html>

I would like to find reason is because i am thinking whether VS code, TMS Web core is a suitable tool to use as i can reuse my existing pascal knowledge and some backend tools that i am familiar with the help of visual drag and drop features, but the VSCode TMS Webcore tool should require a full HTML page instead of the partial html

> <template>

, like above , as if it is partial, the visual form designer will not load.

could anyone help to advice, thanks a lot.

regards,
kalmen.

No, if you use component then it should contain only template and script tags

Hi .appreciate a lot for you who take time to reply, without your reply, i really do not know where to start , at least now i know, i need to go and read andunderstand https://v3.framework7.io/docs/router-component.html#component-structure ,

but looks like there is no way for me to leverage fully on the TMS Webcore, as each of the page/form the tool created will need a full html page that come with header, body tag.