refactor(vue-tutorial): move Meteor tutorial to vue3

assets/theme-colors.less

@@ -1 +1,6 @@
-// Haven't made any changes as we want the default Meteor colors
+.step-images {
+    border-radius: 6px;
+    width: 700px;
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
+    margin-bottom: 10px;
+}

src/simple-todos/step01/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': ['error'],
+    'vue/require-default-prop': 0,
+    'vue/html-indent': ['error', 2],
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+  },
+  globals: {
+    _: true,
+  },
+};

src/simple-todos/step01/.meteor/.finished-upgraders

@@ -17,3 +17,18 @@ notices-for-facebook-graph-api-2
 1.5-add-dynamic-import-package
 1.7-split-underscore-from-meteor-base
 1.8.3-split-jquery-from-blaze
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package
+1.7-split-underscore-from-meteor-base
+1.8.3-split-jquery-from-blaze

src/simple-todos/step01/.meteor/.id

@@ -4,4 +4,4 @@
 #   - ensuring you don't accidentally deploy one app on top of another
 #   - providing package authors with aggregated statistics
 
-gu733n85xrzb.z56vudnb2r4
+ndsl3ducl0p.poz2g1vkys0r

src/simple-todos/step01/.meteor/packages

@@ -4,21 +4,18 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.4.0             # Packages every Meteor app needs to have
+meteor-base@1.5.1             # Packages every Meteor app needs to have
 [email protected]       # Packages for a great mobile UX
-mongo@1.10.1                   # The database Meteor supports right now
-[email protected].11            # Reactive variable for tracker
+mongo@1.16.6                   # The database Meteor supports right now
+[email protected].12            # Reactive variable for tracker
 
-standard-minifier-css@1.7.2   # CSS minifier run for production mode
-standard-minifier-js@2.6.0    # JS minifier run for production mode
+standard-minifier-css@1.9.2   # CSS minifier run for production mode
+standard-minifier-js@2.8.1    # JS minifier run for production mode
 [email protected]                # ECMAScript 5 compatibility for older browsers
-ecmascript@0.15.0              # Enable ECMAScript2015+ syntax in app code
-typescript@4.1.2              # Enable TypeScript syntax in .ts and .tsx modules
+ecmascript@0.16.7              # Enable ECMAScript2015+ syntax in app code
+typescript@4.9.4              # Enable TypeScript syntax in .ts and .tsx modules
 [email protected]            # Server-side component of the `meteor shell` command
+[email protected]  # Update client in development without reloading the page
 
-[email protected]                 # Dependency tracker to allow reactive callbacks
-static-html             # Define static page content in .html files
-akryum:vue-component    # Vue-CLI template to publish components
-
-meteortesting:mocha               # A package for writing and running your meteor app and package tests with mocha
-johanbrook:publication-collector  # Test a Meteor publication by collecting its output
+[email protected]             # Define static page content in .html files
+vite:bundler

src/simple-todos/step01/.meteor/release

@@ -1 +1 @@
-METEOR@2.1
+METEOR@2.12

src/simple-todos/step01/.meteor/versions

@@ -1,79 +1,71 @@
-akryum:[email protected]
-akryum:[email protected]
-akryum:[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
-blaze-tools@1.0.10
+blaze-tools@1.1.3
 [email protected]
 [email protected]
-caching-html-compiler@1.1.3
-callback-hook@1.3.0
-[email protected].1
-[email protected].0
-ddp-client@2.4.0
+caching-html-compiler@1.2.1
+callback-hook@1.5.1
+[email protected].2
+[email protected].1
+ddp-client@2.6.1
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
-[email protected].1
-[email protected].10
+[email protected].3
+[email protected].11
 [email protected]
-[email protected]
-htmljs@1.0.11
-http@1.0.10
-[email protected].0
+[email protected]
+html-tools@1.1.3
+htmljs@1.1.1
+[email protected].1
 [email protected]
-johanbrook:[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-meteortesting:[email protected]
-meteortesting:[email protected]
-meteortesting:[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
 [email protected]
-[email protected].7
-npm-mongo@3.8.1
+[email protected].8
+npm-mongo@4.16.0
 [email protected]
-promise@0.11.2
-[email protected].0
-react-fast-refresh@0.1.0
-[email protected].11
+promise@0.12.2
+[email protected].1
+react-fast-refresh@0.2.7
+[email protected].12
 [email protected]
 [email protected]
-[email protected].0
+[email protected].1
 [email protected]
-socket-stream-client@0.3.1
-spacebars-compiler@1.1.3
-standard-minifier-css@1.7.2
-standard-minifier-js@2.6.0
-static-html@1.2.2
-templating-tools@1.1.2
-tracker@1.2.0
-typescript@4.1.2
-[email protected].10
-[email protected]
-webapp@1.10.0
-[email protected].0
+socket-stream-client@0.5.1
+spacebars-compiler@1.3.1
+standard-minifier-css@1.9.2
+standard-minifier-js@2.8.1
+static-html@1.3.2
+templating-tools@1.2.2
+tracker@1.3.2
+typescript@4.9.4
+[email protected].13
+vite:[email protected]
+webapp@1.13.5
+[email protected].1

src/simple-todos/step01/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80
+}

src/simple-todos/step01/README.md

@@ -0,0 +1,19 @@
+# Meteor + Vue3 + Vite
+
+This is a simple example of how to use Vue3 with Meteor.
+
+## How to use
+
+1. Clone this repo
+2. Run `meteor npm install`
+3. Run `meteor`
+4. Open `http://localhost:3000` in your browser
+
+## Libraries used
+
+- [Vue3](https://v3.vuejs.org/)
+- [Vite](https://vitejs.dev/)
+- [Vue Router](https://next.router.vuejs.org/)
+- [Meteor](https://www.meteor.com/)
+- [Vue Meteor Tracker](https://github.com/meteor-vue/vue-meteor-tracker)
+- [Tailwind CSS](https://tailwindcss.com/)

src/simple-todos/step01/client/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/simple-todos/step01/client/main.html

@@ -1,15 +1,16 @@
 <head>
-  <title>simple-todos-vue</title>
-  <meta charset="utf-8"/>
-  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+  <title>step01</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta
     name="viewport"
     content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
   />
-  <meta name="mobile-web-app-capable" content="yes"/>
-  <meta name="apple-mobile-web-app-capable" content="yes"/>
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
 </head>
 
 <body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="app"></div>
 </body>

src/simple-todos/step01/client/main.js

@@ -1,12 +1 @@
-import Vue from 'vue'
-
-import '../imports/ui/plugins'
-
-import App from '../imports/ui/App.vue'
-
-Meteor.startup(() => {
-  new Vue({
-    el: '#app',
-    ...App,
-  })
-})
+// main entry point is in imports/ui/main.jsx

src/simple-todos/step01/imports/api/links.js

@@ -0,0 +1,10 @@
+import { Meteor } from 'meteor/meteor';
+import { Mongo } from 'meteor/mongo';
+
+export const LinksCollection = new Mongo.Collection('links');
+
+if (Meteor.isServer) {
+  Meteor.publish('links', function () {
+    return LinksCollection.find({});
+  });
+}

src/simple-todos/step01/imports/ui/App.vue

@@ -1,39 +1,22 @@
+<script setup>
+import Task from './components/Task.vue';
+
+const getTasks = () => {
+  return [
+    { _id: 1, text: 'This is task 1' },
+    { _id: 2, text: 'This is task 2' },
+    { _id: 3, text: 'This is task 3' },
+  ];
+};
+</script>
+
 <template>
   <div class="container">
     <header>
-      <h1>Todo List</h1>
+      <h1 class="text-4xl font-bold text-gray-800 my-4">Todo List</h1>
     </header>
-    <ul>
-      <Task
-          v-for="task in getTasks()"
-          v-bind:key="task._id"
-          v-bind:task="task"
-      />
+    <ul class="list-disc list-inside p-4">
+      <Task v-for="task in getTasks()" :key="task._id" :task="task" />
     </ul>
   </div>
 </template>
-
-<script>
-import Vue from "vue";
-import Task from "./components/Task.vue";
-
-export default {
-  components: {
-    Task
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    getTasks() {
-      return [
-        { _id: 1, text: "This is task 1" },
-        { _id: 2, text: "This is task 2" },
-        { _id: 3, text: "This is task 3" }
-      ];
-    }
-  }
-};
-</script>
-
-<style></style>

src/simple-todos/step01/imports/ui/components/Task.vue

@@ -1,12 +1,9 @@
-<template>
-  <li>{{ this.task.text }}</li>
-</template>
+<script setup>
+import { defineProps } from 'vue';
 
-<script>
-export default {
-  props: ["task"],
-  data() {
-    return {};
-  }
-};
+defineProps(['task']);
 </script>
+
+<template>
+  <li>{{ task.text }}</li>
+</template>

src/simple-todos/step01/imports/ui/main.js

@@ -0,0 +1,13 @@
+import { Meteor } from 'meteor/meteor';
+import { createApp } from 'vue';
+import { VueMeteor } from 'vue-meteor-tracker';
+
+import App from './App.vue';
+import { router } from './router';
+
+Meteor.startup(() => {
+  const app = createApp(App);
+  app.use(router);
+  app.use(VueMeteor);
+  app.mount('#app');
+});