├── .gitignore ├── README.md ├── babel.config.js ├── cypress.json ├── cypress ├── integration │ └── example.spec.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── netlify.toml ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── tailwind.css ├── components │ ├── About.vue │ ├── Todo.vue │ ├── Todos.vue │ └── icons │ │ └── Cloud.vue ├── main.js └── server.js ├── tailwind.config.js ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mirage Vue demo 2 | 3 | **ARCHIVED** 4 | 5 | Moved to https://github.com/miragejs/examples. 6 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /cypress/integration/example.spec.js: -------------------------------------------------------------------------------- 1 | import { makeServer } from "../../src/server"; 2 | 3 | let server; 4 | 5 | beforeEach(() => { 6 | server = makeServer({ environment: "test" }); 7 | }); 8 | 9 | afterEach(() => { 10 | server.shutdown(); 11 | }); 12 | 13 | it("shows the users from our server", () => { 14 | server.logging = true; 15 | server.db.loadData({ 16 | todos: [{ text: "Buy groceries", isDone: false }] 17 | }); 18 | 19 | cy.visit("/"); 20 | 21 | cy.get('[data-testid="Buy groceries"]') 22 | .get("input") 23 | .should("not.value", "Buy groceries"); 24 | }); 25 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | 22 | Cypress.on("window:before:load", win => { 23 | win.handleFromCypress = function(request) { 24 | return fetch(request.url, { 25 | method: request.method, 26 | headers: request.requestHeaders, 27 | body: request.requestBody 28 | }).then(res => { 29 | let content = 30 | res.headers.map && 31 | res.headers.map["content-type"] === "application/json" 32 | ? res.json() 33 | : res.text(); 34 | return new Promise(resolve => { 35 | content.then(body => resolve([res.status, res.headers, body])); 36 | }); 37 | }); 38 | }; 39 | }); 40 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # SPA push state routing 2 | [[redirects]] 3 | from = "/*" 4 | to = "/index.html" 5 | status = 200 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "e2e": "vue-cli-service test:e2e" 10 | }, 11 | "dependencies": { 12 | "@vue/cli-plugin-e2e-cypress": "^4.2.2", 13 | "axios": "^0.19.0", 14 | "core-js": "^2.6.5", 15 | "miragejs": "0.1.33", 16 | "prettier": "^1.18.2", 17 | "tailwindcss": "^1.1.2", 18 | "vue": "^2.6.10", 19 | "vue-router": "^3.1.3" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.11.0", 23 | "@vue/cli-plugin-eslint": "^3.11.0", 24 | "@vue/cli-service": "^3.11.0", 25 | "babel-eslint": "^10.0.1", 26 | "eslint": "^5.16.0", 27 | "eslint-plugin-cypress": "^2.9.0", 28 | "eslint-plugin-vue": "^5.0.0", 29 | "null-loader": "^3.0.0", 30 | "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0", 31 | "vue-template-compiler": "^2.6.10" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "plugin:cypress/recommended", 41 | "eslint:recommended" 42 | ], 43 | "rules": {}, 44 | "parserOptions": { 45 | "parser": "babel-eslint" 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("tailwindcss"), require("autoprefixer")] 3 | }; 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miragejs-archive/vue-demo/0e6216957f736b3ac4ab83cc4c748c5d6be1f874/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mirage Vue demo 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/components/About.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/Todo.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 78 | -------------------------------------------------------------------------------- /src/components/Todos.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /src/components/icons/Cloud.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter from "vue-router"; 3 | import App from "./App.vue"; 4 | import { makeServer } from "./server"; 5 | import { Server, Response } from "miragejs"; 6 | import Todos from "./components/Todos"; 7 | import About from "./components/About"; 8 | 9 | Vue.config.productionTip = false; 10 | Vue.use(VueRouter); 11 | 12 | if (window.Cypress) { 13 | // mirage cypress/test server 14 | new Server({ 15 | environment: "test", 16 | routes() { 17 | let methods = ["get", "put", "patch", "post", "delete"]; 18 | methods.forEach(method => { 19 | this[method]("/*", async (schema, request) => { 20 | let [status, headers, body] = await window.handleFromCypress(request); 21 | return new Response(status, headers, body); 22 | }); 23 | }); 24 | } 25 | }); 26 | } else { 27 | // this is the mirage development and production server 28 | makeServer(); 29 | } 30 | 31 | const router = new VueRouter({ 32 | mode: "history", 33 | routes: [ 34 | { path: "/", component: Todos }, 35 | { path: "/about", component: About } 36 | ] 37 | }); 38 | 39 | new Vue({ 40 | router, 41 | render: h => h(App) 42 | }).$mount("#app"); 43 | -------------------------------------------------------------------------------- /src/server.js: -------------------------------------------------------------------------------- 1 | import { Server } from "miragejs"; 2 | 3 | export function makeServer({ environment = "development" } = {}) { 4 | let server = new Server({ 5 | environment, 6 | 7 | seeds(server) { 8 | server.db.loadData({ 9 | todos: [ 10 | { text: "Buy groceries", isDone: false }, 11 | { text: "Walk the dog", isDone: false }, 12 | { text: "Do laundry", isDone: false } 13 | ] 14 | }); 15 | }, 16 | 17 | routes() { 18 | this.namespace = "api"; 19 | this.timing = 750; 20 | 21 | this.get("/todos", ({ db }) => { 22 | return db.todos; 23 | }); 24 | 25 | this.patch("/todos/:id", (schema, request) => { 26 | let todo = JSON.parse(request.requestBody).data; 27 | 28 | return schema.db.todos.update(todo.id, todo); 29 | }); 30 | 31 | this.post("/todos", (schema, request) => { 32 | let todo = JSON.parse(request.requestBody).data; 33 | 34 | return schema.db.todos.insert(todo); 35 | }); 36 | 37 | this.delete("/todos/:id", (schema, request) => { 38 | return schema.db.todos.remove(request.params.id); 39 | }); 40 | } 41 | }); 42 | 43 | window.server = server; 44 | 45 | return server; 46 | } 47 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | variants: { 3 | backgroundColor: ["responsive", "hover", "focus", "focus-within"], 4 | borderColor: ["responsive", "hover", "focus", "focus-within"] 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pluginOptions: { 3 | webpackBundleAnalyzer: { 4 | openAnalyzer: false 5 | } 6 | }, 7 | 8 | chainWebpack: config => { 9 | config.resolve.symlinks(false); 10 | 11 | if ( 12 | process.env.NODE_ENV === "production" && 13 | process.env.MIRAGE_ENABLED !== "true" 14 | ) { 15 | config.module 16 | .rule("exclude-mirage") 17 | .test(/node_modules\/miragejs\//) 18 | .use("null-loader") 19 | .loader("null-loader"); 20 | } 21 | } 22 | }; 23 | --------------------------------------------------------------------------------