initial commit

Author: mattmaribojoc

.gitignore

@@ -0,0 +1,3 @@
+dist
+.DS_Store
+node_modules

README.md

@@ -0,0 +1,26 @@
+# vue-next-webpack-preview
+
+> Minimal webpack setup for Vue 3 (alpha) 
+
+This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.
+
+Also note that if you are using VSCode, Vetur isn't updated to take advantage of Vue 3's typing yet so intellisense in Vue files may not be fully functional (especially in templates).
+
+### Prerequisites
+- Node & NPM
+
+### Install
+```sh
+npm install
+```
+### Usage
+##### Develop
+```sh
+# run dev server at localhost:8080
+npm run dev
+```
+##### Build
+```sh
+# transpile js for deployment
+npm run build
+```

index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/dist/main.css">
+<div id="app"></div>
+<script src="/dist/main.js"></script>

package-lock.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "webpack --env.prod"
+  },
+  "dependencies": {
+    "vue": "^3.0.0-alpha.10",
+    "vue-router": "4.0.0-alpha.4"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-alpha.10",
+    "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "url-loader": "^4.0.0",
+    "vue-loader": "^16.0.0-alpha.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}

package.json

@@ -0,0 +1,47 @@
+<template>
+  <div id='root'>
+    <img src='./logo.png' />
+    <div id='nav'>
+      <router-link to='/'> Home</router-link>
+      <router-link to='/contact'>Contact </router-link>
+    </div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+ 
+}
+</script>
+
+<style scoped>
+
+#root {
+  text-align: center;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+img {
+  width: 200px;
+}
+
+#nav {
+  font-size: 1.5em;
+  margin-bottom: 30px;
+}
+
+a {
+  text-decoration: none;
+  margin: 30px 25px;
+  color: #333;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: 
+}
+
+</style>

src/App.vue

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/logo.png

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import Contact from '../views/Contact.vue'
+
+const routerHistory = createWebHistory()
+
+const router = createRouter({
+  history: routerHistory,
+  routes: [
+    {
+      path: '/',
+      component: Home
+    },
+    {
+      path: '/contact',
+      component: Contact
+    }
+  ]
+})
+
+export default router

src/main.js

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Contact
+  </div>
+</template>