SvelteKit and Meteor

Svelte
1

I’m currently testing Meteor and Svelte and it seems to work very well. I’d love to use SvelteKit. Is this currently possible?

1 Like
2

Hi @seravault, Today you can use Meteor and Svelte together.

Is there anything special in SvelteKit that you needed to use it? What is your use case?

One possibility would be to use Meteor as a backend for your SvelteKit application.

2 Likes
3

@fredmaiaarantes , a couple things come to mind about being able to use SvelteKit. Routing just works and with regular achor tags. This is one of the things I like most about it. Layouts and slot too.

Routing:

Layout:

1 Like
4

Just tried out tinro with Meteor. It works with normal anchor tags and is easy to setup and use for navigation, active links and layouts.

I used pages as components to function as a slot of sorts inside my layout.
Here’s an example:

App.svelte

<script>
  import "../../client/main.css";
  import Layout from "./layouts/Layout.svelte";
</script>

<Layout />

Layout.svelte

<script>
    import Home from "../pages/home.svelte";
    import Test from "../pages/test.svelte";
    import { active } from "tinro";
</script>

<header>
    <nav>
        <a href="/" use:active exact>Home</a>
        <a href="/test" use:active exact>Test</a>
    </nav>
</header>

<main>

<Route path="/">
    <Home />
</Route>

<Route path="/test">
    <Test />
</Route>

</main>

<footer>This is the footer</footer>

<style>
    :global(.active) {
        text-decoration: underline;
    }
</style>

home.svelte

<script>
    import { Route } from "tinro";
</script>

<h1>Home page stuff</h1>

test.svelte

<script>
    import { Route } from "tinro";
</script>

<h1>Test page is here</h1>
2 Likes
5

Server-side rendering is the other benefit with SvelteKit. Built-in routing is handy but tinro has worked out pretty well so far.

3 Likes
6

Meteor should up game by including a default routing feature with all the latest jazz like route-based SSR, partial hydration, etc, otherwise someone else will in the near future along with a new reactive stack, and this will pose a threat to Meteor’s bread and butter.

5 Likes
7

Any of you guys have taken a close look at Flow Router? GitHub - veliovgroup/flow-router: 🚦 Carefully extended flow-router for Meteor

8

The svelte kit itself has a separate server and therefore can have a good ssr,
I do not think it can be combined with a meteor.
It is better to use it with a separate powerful api.

9

There were too many issues with tinro. Things would just break. It was random.

I switched to svelte-navigator. It’s been relatively smooth and haven’t had any issues. :slight_smile:

1 Like
10

I use tinro in my meteor/svelte projects. What kind of problems did you have with tinro? Maybe there will be an alternative for me.

11

I mentioned before about Tinro, but I wouldn’t recommend Tinro for Svelte and Meteor.

I had a ton of issues that were totally random. Clicking on certain links within the app would sometimes make the app unresponsive. Refreshing the page would bring the functionality back but then clicking on the link again would do it again, usually. Sometimes clicking on links multiple times quickly would do it, too. I did a lot of things (hacks) to try to make it work. No such luck.

I switched to svelte-navigator and the problems went away.
mefechoel/svelte-navigator: Simple, accessible routing for Svelte (github.com)

1 Like