Minimal Router for petite-vue

[drunksaint]

Hi
I'm interested in using petite-vue for its simplicity for a personal project, but need some (basic) routing functionality in it. Do you think using a routing library like vue router is a good idea? Or is there something more bare bones that you would recommend (something like vitepress' routing perhaps - from what I understand it has a minimalist router implementation).

[Fry98]

If you really need client-side routing, you should use regular Vue. petite-vue is made specifically to add a little bit of additional functionality on top of your server rendered page and it's not at all compatible with vue-router. If you don't need to share global state between different routes, you can of course just include petite-vue on multiple different server rendered pages. If you need your app to be a real SPA however then petite-vue is just not a right choice for that.

[sqllyw]

maybe Page?
https://www.npmjs.com/package/page

[niutech]

@pwFoo I would use a lightweight router like page/director and separate Petite Vue components with templates for every route.

[pwFoo]

So different components / templates with v-if to hide inactive parts?

Played with dynamic $template, but isn't reactive on page change. PetiteVue.reactive, but with a custom router function and at the moment I check if that won't work or just is a problem with my code...

[niutech]

@pwFoo Here is a working demo of Director + Petite Vue.

[pwFoo]

@niutech Thanks! Created a similar solution with v-if to show or hide (un-/mount...). But the part I would like to reduce is:

<section id="one" v-scope="One()"></section>
<section id="two" v-scope="Two()"></section>

Would be great to have something like that with an array of page components:

<section v-for="page in pages" :id="page.id" v-scope="page.comp()"></section>

Tried to build that with v-for, but looks like component was not executed. But my setup was simpler with just an array of components

<div v-for="page in pages" v-scope="page()"></div>

or

<div v-for="page in store.pages">
    <div v-scope="page()"></div>
</div>

Each component was defined as function and added to a page array

comp1 = () => {...}
comp2 = () => {...}
comp3 = () => {...}

store = PetiteVue.reactive({
    pages: [
        comp1,
        comp2,
        comp3,
    ]
})

[niutech]

@pwFoo This will not work since in my demo the components One, Two are being lazily mounted only inside #one and #two upon choosing a route, so there is no global v-scope and you cannot use v-for outside of <section>, unless you manually add PetiteVue.createApp({...}).mount() in the global scope. But this is not part of my solution and you have to tinker by yourself.

[fparedlo]

I feel like we are trying to transform petite-vue into vue or at least to be a replacement but the truth is that petite-vue wasn't created for this kind of complexity.

…

On Mon, 15 Aug 2022 at 11:29, niu tech ***@***.***> wrote: @pwFoo <https://github.com/pwFoo> How about this: Router({ '/one': () => createApp({OneApp}).mount(), '/two': () => createApp({TwoApp}).mount(), }).init() — Reply to this email directly, view it on GitHub <#83 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAO23NJP26OAAGEYHFNURDVZILXHANCNFSM5EDNQHYA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- *Ferran*

[jikkuatwork]

I feel with a few more features, this is all we need for so many use cases!

[pwFoo]

@fparedlo
I think a small vanilla js router or independent plugin that works with Petite-Vue shouldn't be wrong...
And file size vue 3 minified 164kb compared to 17kb minified petite-vue with all the features I need. Also I like template elements instead of html strings.

Maybe I should take a look into vue3 too...

[francisfontoura]

Working example (with npm:page):

main.js

import { createApp } from "https://esm.run/petite-vue";
import page from "https://unpkg.com/page/page.mjs";

function Home() {
  return {};
}

function Counter() {
  return {
    count: 0,
    $template: `
      <h1>Counter</h1>
      My count is {{ count }}
      <button @click="count++">++</button>
    `,
  };
}

function Gauge() {
  return {
    gauge: 0,
    $template: `
      <h1>Gauge</h1>
      My gauge is {{ gauge }}
      <button @click="gauge--">--</button>
      <button @click="gauge++">++</button>
    `,
  };
}

const createPageHandler = (createScope) => () => {
  const app = document.getElementById("app");
  app.innerHTML = '<div v-scope="scope"></div>';
  createApp({
    get scope() {
      return createScope();
    },
  }).mount();
};

page({ window });

page("/", createPageHandler(Home));
page("/counter", createPageHandler(Counter));
page("/gauge", createPageHandler(Gauge));

page();

index.html

  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/counter">Counter</a>
      <a href="/gauge">Gauge</a>
    </nav>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
  </body>

[jikkuatwork]

But sadly, the state of the components gets reset across the routing?