@@ -122,7 +146,17 @@ If your computer is fast enough, it's possible that when it sets up the default
@@ -194,4 +228,3 @@ In a collection, every inserted document has a unique `_id` field that can refer
and other fields like `isChecked` and `text`. We use these to call Meteor methods for updating or removing the specific task.
In the next step, we are going to improve the look of your app using CSS with Flexbox.
-
diff --git a/v3-docs/docs/tutorials/svelte/5.styles.md b/v3-docs/docs/tutorials/svelte/5.styles.md
index bdfb613df4..bc3c1e4f6b 100644
--- a/v3-docs/docs/tutorials/svelte/5.styles.md
+++ b/v3-docs/docs/tutorials/svelte/5.styles.md
@@ -157,6 +157,8 @@ Now you need to add some elements around your components. You are going to add a
```html [imports/ui/App.svelte]
diff --git a/v3-docs/docs/tutorials/svelte/6.filter-tasks.md b/v3-docs/docs/tutorials/svelte/6.filter-tasks.md
index 82035aca7d..f68828a848 100644
--- a/v3-docs/docs/tutorials/svelte/6.filter-tasks.md
+++ b/v3-docs/docs/tutorials/svelte/6.filter-tasks.md
@@ -37,9 +37,31 @@ We'll add a `hideCompleted` variable to the `App.svelte` component and a functio
hideCompleted = !hideCompleted; // [!code highlight]
} // [!code highlight]
- $m: handle = Meteor.subscribe("tasks");
- $m: subIsReady = handle.ready();
- $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
+ // Reactive state
+ let handle;
+ let subIsReady = false;
+ let tasks = [];
+
+ let computation;
+
+ onMount(() => {
+ handle = Meteor.subscribe("tasks");
+
+ computation = Tracker.autorun(() => {
+ subIsReady = handle.ready();
+ tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
+ });
+
+ return () => {
+ computation?.stop?.();
+ handle?.stop?.();
+ };
+ });
+
+ onDestroy(() => {
+ computation?.stop?.();
+ handle?.stop?.();
+ });
@@ -122,6 +144,8 @@ Now, update the reactive tasks fetch to apply the filter if `hideCompleted` is t
```html [imports/ui/App.svelte]
diff --git a/v3-docs/docs/tutorials/svelte/7.adding-user-accounts.md b/v3-docs/docs/tutorials/svelte/7.adding-user-accounts.md
index b6318a85d1..30d1902382 100644
--- a/v3-docs/docs/tutorials/svelte/7.adding-user-accounts.md
+++ b/v3-docs/docs/tutorials/svelte/7.adding-user-accounts.md
@@ -134,9 +134,19 @@ To achieve this, we will use a conditional block in `App.svelte`:
```html [imports/ui/App.svelte]
@@ -289,7 +299,7 @@ Meteor.publish("tasks", function () {
if (userId) {
result = TasksCollection.find({ userId });
}
-
+
return result;
});
```
@@ -303,22 +313,44 @@ Now let's check if we have a `currentUser` before trying to fetch any data. Upda
diff --git a/v3-docs/docs/tutorials/svelte/9.next-steps.md b/v3-docs/docs/tutorials/svelte/9.next-steps.md
index fec785efbc..bd894372c8 100644
--- a/v3-docs/docs/tutorials/svelte/9.next-steps.md
+++ b/v3-docs/docs/tutorials/svelte/9.next-steps.md
@@ -5,7 +5,7 @@ You have completed the tutorial!
By now, you should have a good understanding of working with Meteor and Svelte.
::: info
-You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-svelte).
+You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-meteor).
:::
Here are some options for what you can do next:
diff --git a/v3-docs/docs/tutorials/svelte/index.md b/v3-docs/docs/tutorials/svelte/index.md
index 6171827fc0..b5a4ab6ee2 100644
--- a/v3-docs/docs/tutorials/svelte/index.md
+++ b/v3-docs/docs/tutorials/svelte/index.md
@@ -1,6 +1,6 @@
# Meteor.js 3 + Svelte
-In this tutorial, we will create a simple To-Do app using [Svelte](https://svelte.dev/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Solid](https://www.solidjs.com/), and [Blaze](https://www.blazejs.org/).
+In this tutorial, we will create a simple To-Do app using [Svelte v5](https://svelte.dev/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Solid](https://www.solidjs.com/), and [Blaze](https://www.blazejs.org/).
Svelte is a modern UI framework that compiles your code to highly efficient vanilla JavaScript at build time, resulting in smaller bundles and faster runtime performance. Launched in 2016, it has gained popularity for its simplicity and reactivity without a virtual DOM. Compared to older approaches, Svelte eliminates much of the boilerplate and runtime overhead found in frameworks like React. It uses a declarative syntax with built-in state management, transitions, and stores that can be integrated with Meteor's reactive data sources like [Tracker](https://docs.meteor.com/api/tracker.html) and [Minimongo](https://docs.meteor.com/api/collections.html). This means your UI updates automatically as data changes, without manual DOM manipulation.
diff --git a/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md b/v3-docs/docs/tutorials/vue/meteorjs3-vue3.md
similarity index 97%
rename from v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md
rename to v3-docs/docs/tutorials/vue/meteorjs3-vue3.md
index 60280b4656..25a0f615bd 100644
--- a/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md
+++ b/v3-docs/docs/tutorials/vue/meteorjs3-vue3.md
@@ -1,10 +1,11 @@
-# Meteor.js 3 + Vue 3 and `vue-meteor-tracker`
+# Meteor.js 3 + Vue 3
In this tutorial, we will create a simple To-Do app using [Vue 3](https://vuejs.org/) and Meteor 3.0. Meteor works well with other frameworks like [Blaze](https://www.blazejs.org/), [React](https://react.dev/), [Solid](https://www.solidjs.com/), and [Svelte](https://svelte.dev/).
Vue.js is a powerful JavaScript framework for making user interfaces. It helps you build interactive applications by using templates that connect to data and update automatically when the data changes. Vue.js templates use a simple syntax similar to HTML and work with Vue’s reactivity system to show components in the browser.
To start building your Vue.js app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option.
+
:::warning
This tutorial uses the `vue-meteor-tracker` package, which is currently in beta and does not support async calls yet. However, it is still a valuable package, and we hope it will be updated soon. We are also working on a new tutorial that will use Meteor core packages instead.
:::
@@ -36,13 +37,15 @@ To set up Meteor with Vue easily, run the following command, replacing `simple-t
meteor create --vue simple-todos-vue
```
+Meteor will create all the necessary files for you. The `--vue` flag generates a project using Vue, Rspack and Tailwind CSS, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
+
+We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
+
::: info
-You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-vue3).
+You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-meteor).
:::
-Meteor will create all the necessary files for you. The `--vue` flag generates a project using Vue, Vite and Tailwind CSS.
-
-You will find the `client` directory contains files for your client-side setup. Inside, there should be an empty `main.js` file required for Meteor's import mode. However, with Vite, the entry point is set in the `vite.config.js` file, pointing to `imports/ui/main.js`, which is where Meteor renders the main component.
+You will find the `client` directory contains files for your client-side setup. Inside, you can see for example `client/main.jsx` where Meteor is rendering your App main component into the HTML.
Check the server directory for the server setup where you will see `server/main.js` populating your MongoDB database with some default data. There's no need to install MongoDB separately, as Meteor includes an embedded version.
@@ -52,7 +55,7 @@ To run your app, use:
meteor npm run start
```
-Your Vue code will be located in the `imports/ui directory`, with `App.vue` as the root component of your app.
+Your Vue code will be located in the `imports/ui` directory, with `App.vue` as the root component of your app.
Take a moment to explore the files created by Meteor. You don’t have to understand everything right away, but it helps to know where they are.
@@ -1366,7 +1369,7 @@ You have completed the tutorial!
By now, you should have a good understanding of working with Meteor and Vue.
::: info
-You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-vue3).
+You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-meteor).
:::
Here are some options for what you can do next: