[SOLVED] V3 - componentUrl not rendering from routeable tab

nonayerbiz · June 10, 2019, 8:36pm

I’m placing this single file component as specified here:
https://v3.framework7.io/docs/router-component.html#single-file-component

but minimal just to get it hooked up exactly as appears here:

gist.github.com

https://gist.github.com/minskmaz/ae3f3647df503c15d9ec9f8b06349b19

routes.js

import HomePage from './pages/home.f7.html';
import AboutPage from './pages/about.f7.html';
import FormPage from './pages/form.f7.html';
import DynamicRoutePage from './pages/dynamic-route.f7.html';
import NotFoundPage from './pages/not-found.f7.html';

import PanelLeftPage from './pages/panel-left.f7.html';
import PanelRightPage from './pages/panel-right.f7.html';

export default [

This file has been truncated. show original

tab-3.html

<!-- component template -->
<template>
  <div>HELLO WORLD</div>
</template>

<style>
  div {
    background-color: red;
  }
</style>

This file has been truncated. show original

Nothing renders. There’s no red background and “HELLO WORLD” but no error either…

nolimits4web · June 11, 2019, 8:30am

Can you please setup it on JSFiddle so we can debug and check it? You can start from modifying this one https://jsfiddle.net/nolimits4web/o2ejupu1/

nonayerbiz · June 11, 2019, 5:00pm

Apolgies @nolimits4web I’m not that good with JSFiddle - I’ve placed a public repo here - https://gitlab.com/mmsupport/component_url

nonayerbiz · June 11, 2019, 6:58pm

I solved this by:

naming my component tab-3.f7.html <-- ( the “f7” in the name seems to matter )
explicitly importing my component

import TabThree from './component/tab-3.f7.html';

*changing componentUrl to component

      {
        path: '/tab-3/',
        id: 'tab-3',
        component: TabThree,
      },