Eric Crooks crookse
crookse
/ routes.compiled.js
Created
November 28, 2019 14:44
Vue: Automate Your Routing - routes.compiled.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as about_0 from "/private/var/src/vue-automated-routing/vue/about.vue"; | |
| import * as contact_1 from "/private/var/src/vue-automated-routing/vue/contact.vue"; | |
| import * as home_2 from "/private/var/src/vue-automated-routing/vue/home.vue"; | |
| export default [ | |
| about_0, | |
| contact_1, | |
| home_2, | |
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const http = require('http'); | |
| const fs = require('fs'); | |
| compileVueRouteComponents(); | |
| let server = http.createServer((req, res) => { | |
| // If the request is for an asset, then send the asset and end the response | |
| if (req.url.includes('assets/')) { | |
| res.write(fs.readFileSync(`${__dirname}/${req.url}`)); | |
| return res.end(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const http = require('http'); | |
| const fs = require('fs'); | |
| let server = http.createServer((req, res) => { | |
| // If the request is for an asset, then send the asset and end the response | |
| if (req.url.includes('assets/')) { | |
| res.write(fs.readFileSync(`${__dirname}/${req.url}`)); | |
| return res.end(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Vue Automated Routing</title> | |
| <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="vue_app_mount"> | |
| <div class="max-w-sm rounded overflow-hidden shadow-lg"> | |
| <div class="px-6 py-4"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Vue from "vue"; | |
| import VueRouter from "vue-router"; | |
| Vue.use(VueRouter); | |
| // This code will parse through the route components and push the paths and meta data found in the | |
| // `route` variable in each component. That data will be pushed to the `routes` variable and that | |
| // `routes` variable will registerd in the Vue Router instance below. | |
| let routes = []; | |
| import routeComponents from "./routes.compiled.js" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template lang="pug"> | |
| div#vue_app | |
| transition | |
| keep-alive | |
| router-view | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template lang="pug"> | |
| div | |
| h1 {{ $route.meta.title }} | |
| p {{ description }} | |
| </template> | |
| <script> | |
| export const route = { | |
| paths: ["/about"], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template lang="pug"> | |
| div | |
| h1 {{ $route.meta.title }} | |
| p {{ description }} | |
| </template> | |
| <script> | |
| export const route = { | |
| paths: ["/contact"], | |
| meta: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template lang="pug"> | |
| div | |
| h1 {{ $route.meta.title }} | |
| p {{ description }} | |
| </template> | |
| <script> | |
| export const route = { | |
| paths: ["/"], | |
| meta: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "vue-automated-routing", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "devDependencies": { | |
| "@babel/core": "^7.7.4", | |
| "babel-loader": "^8.0.6", | |
| "pug": "^2.0.4", | |
| "pug-plain-loader": "^1.0.0", |
NewerOlder