├── .gitignore
├── .prettierrc
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── components
    │   ├── CompositionAPIComponent.vue
    │   └── OptionsAPIComponent.vue
    ├── main.ts
    ├── shims-vue.d.ts
    ├── store
    │   ├── action-types.ts
    │   ├── actions.ts
    │   ├── getters.ts
    │   ├── index.ts
    │   ├── mutation-types.ts
    │   ├── mutations.ts
    │   └── state.ts
    └── types
    │   └── index.d.ts
├── tsconfig.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | .DS_Store
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-next-webpack-preview
 2 | 
 3 | > Minimal webpack setup for Vue 3 (beta) 
 4 | 
 5 | This is for preview purposes only. There might be bugs and undocumented behavior differences from v2, which are expected.
 6 | 
 7 | 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).
 8 | 
 9 | ### Prerequisites
10 | - Node & NPM
11 | 
12 | ### Install
13 | ```sh
14 | npm install
15 | ```
16 | ### Usage
17 | ##### Develop
18 | ```sh
19 | # run dev server at localhost:8080
20 | npm run dev
21 | ```
22 | ##### Build
23 | ```sh
24 | # transpile js for deployment
25 | npm run build
26 | ```
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <link rel="stylesheet" href="/dist/main.css" />
2 | <div id="app"></div>
3 | <script src="/dist/main.js"></script>
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "webpack-dev-server",
 5 |     "build": "webpack --env.prod"
 6 |   },
 7 |   "dependencies": {
 8 |     "vue": "^3.0.0-beta.7",
 9 |     "vuex": "^4.0.0-beta.1"
10 |   },
11 |   "devDependencies": {
12 |     "@vue/compiler-sfc": "^3.0.0-beta.7",
13 |     "css-loader": "^3.4.2",
14 |     "file-loader": "^6.0.0",
15 |     "mini-css-extract-plugin": "^0.9.0",
16 |     "ts-loader": "^7.0.2",
17 |     "typescript": "^3.8.3",
18 |     "url-loader": "^4.0.0",
19 |     "vue-loader": "^16.0.0-alpha.3",
20 |     "webpack": "^4.42.1",
21 |     "webpack-cli": "^3.3.11",
22 |     "webpack-dev-server": "^3.10.3"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section id="app">
 3 |     <h1>Counter</h1>
 4 |     <CompositionAPIComponent></CompositionAPIComponent>
 5 |     <OptionsAPIComponent></OptionsAPIComponent>
 6 |   </section>
 7 | </template>
 8 | 
 9 | <script lang="ts">
10 | import { defineComponent } from 'vue'
11 | import CompositionAPIComponent from './components/CompositionAPIComponent.vue'
12 | import OptionsAPIComponent from './components/OptionsAPIComponent.vue'
13 | 
14 | export default defineComponent({
15 |   name: 'App',
16 |   components: {
17 |     CompositionAPIComponent,
18 |     OptionsAPIComponent,
19 |   },
20 | })
21 | </script>
22 | 
23 | <style>
24 | #app {
25 |   font-family: Arial, sans-serif;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/CompositionAPIComponent.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent, computed, h } from 'vue'
 3 | import { useStore } from '../store'
 4 | import { MutationTypes } from '../store/mutation-types'
 5 | import { ActionTypes } from '../store/action-types'
 6 | 
 7 | export default defineComponent({
 8 |   name: 'CompositionAPIComponent',
 9 |   setup(props, context) {
10 |     const store = useStore()
11 | 
12 |     const counter = computed(() => store.state.counter)
13 |     const doubledCounter = computed(() => store.getters.doubledCounter)
14 | 
15 |     function resetCounter() {
16 |       store.commit(MutationTypes.SET_COUNTER, 0)
17 |     }
18 | 
19 |     async function getCounter() {
20 |       const result = await store.dispatch(ActionTypes.GET_COUTNER, 256)
21 |     }
22 | 
23 |     return () =>
24 |       h('section', undefined, [
25 |         h('h2', undefined, 'Composition API Component'),
26 |         h('p', undefined, counter.value.toString()),
27 |         h('button', { type: 'button', onClick: resetCounter }, 'Reset coutner'),
28 |       ])
29 |   },
30 | })
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/OptionsAPIComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h2>Options API Component</h2>
 4 |     <p>Counter: {{ counter }}, doubled counter: {{ counter }}</p>
 5 |     <input v-model.number="counter" type="text" />
 6 |     <button type="button" @click="resetCounter">Reset counter</button>
 7 |   </section>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import { defineComponent } from 'vue'
12 | import { MutationTypes } from '../store/mutation-types'
13 | import { ActionTypes } from '../store/action-types'
14 | 
15 | export default defineComponent({
16 |   name: 'OptionsAPIComponent',
17 |   computed: {
18 |     counter: {
19 |       get() {
20 |         return this.$store.state.counter
21 |       },
22 |       set(value: number) {
23 |         this.$store.commit(MutationTypes.SET_COUNTER, value)
24 |       },
25 |     },
26 |     doubledCounter() {
27 |       return this.$store.getters.doubledCounter
28 |     },
29 |   },
30 |   methods: {
31 |     resetCounter() {
32 |       this.$store.commit(MutationTypes.SET_COUNTER, 0)
33 |     },
34 |     async getCounter() {
35 |       const result = await this.$store.dispatch(ActionTypes.GET_COUTNER, 256)
36 |     },
37 |   },
38 | })
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import { store } from './store'
4 | 
5 | createApp(App).use(store).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { ComponentOptions } from 'vue'
3 |   const component: ComponentOptions
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/action-types.ts:
--------------------------------------------------------------------------------
1 | export enum ActionTypes {
2 |   GET_COUTNER = 'GET_COUTNER',
3 | }
4 | 


--------------------------------------------------------------------------------
/src/store/actions.ts:
--------------------------------------------------------------------------------
 1 | import { ActionTree, ActionContext } from 'vuex'
 2 | import { State } from './state'
 3 | import { Mutations } from './mutations'
 4 | import { ActionTypes } from './action-types'
 5 | import { MutationTypes } from './mutation-types'
 6 | 
 7 | type AugmentedActionContext = {
 8 |   commit<K extends keyof Mutations>(
 9 |     key: K,
10 |     payload: Parameters<Mutations[K]>[1]
11 |   ): ReturnType<Mutations[K]>
12 | } & Omit<ActionContext<State, State>, 'commit'>
13 | 
14 | export interface Actions {
15 |   [ActionTypes.GET_COUTNER](
16 |     { commit }: AugmentedActionContext,
17 |     payload: number
18 |   ): Promise<number>
19 | }
20 | 
21 | export const actions: ActionTree<State, State> & Actions = {
22 |   [ActionTypes.GET_COUTNER]({ commit }) {
23 |     return new Promise((resolve) => {
24 |       setTimeout(() => {
25 |         const data = 256
26 |         commit(MutationTypes.SET_COUNTER, data)
27 |         resolve(data)
28 |       }, 500)
29 |     })
30 |   },
31 | }
32 | 


--------------------------------------------------------------------------------
/src/store/getters.ts:
--------------------------------------------------------------------------------
 1 | import { GetterTree } from 'vuex'
 2 | import { State } from './state'
 3 | 
 4 | export type Getters = {
 5 |   doubledCounter(state: State): number
 6 | }
 7 | 
 8 | export const getters: GetterTree<State, State> & Getters = {
 9 |   doubledCounter: (state) => {
10 |     return state.counter * 2
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createStore,
 3 |   Store as VuexStore,
 4 |   CommitOptions,
 5 |   DispatchOptions,
 6 | } from 'vuex'
 7 | import { State, state } from './state'
 8 | import { Getters, getters } from './getters'
 9 | import { Mutations, mutations } from './mutations'
10 | import { Actions, actions } from './actions'
11 | 
12 | export const store = createStore({
13 |   state,
14 |   getters,
15 |   mutations,
16 |   actions,
17 | })
18 | 
19 | export type Store = Omit<
20 |   VuexStore<State>,
21 |   'getters' | 'commit' | 'dispatch'
22 | > & {
23 |   commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
24 |     key: K,
25 |     payload: P,
26 |     options?: CommitOptions
27 |   ): ReturnType<Mutations[K]>
28 | } & {
29 |   dispatch<K extends keyof Actions>(
30 |     key: K,
31 |     payload: Parameters<Actions[K]>[1],
32 |     options?: DispatchOptions
33 |   ): ReturnType<Actions[K]>
34 | } & {
35 |   getters: {
36 |     [K in keyof Getters]: ReturnType<Getters[K]>
37 |   }
38 | }
39 | 
40 | export function useStore() {
41 |   return store as Store
42 | }
43 | 


--------------------------------------------------------------------------------
/src/store/mutation-types.ts:
--------------------------------------------------------------------------------
1 | export enum MutationTypes {
2 |   SET_COUNTER = 'SET_COUNTER',
3 |   RESET_COUNTER = 'RESET_COUNTER',
4 | }
5 | 


--------------------------------------------------------------------------------
/src/store/mutations.ts:
--------------------------------------------------------------------------------
 1 | import { MutationTree } from 'vuex'
 2 | import { MutationTypes } from './mutation-types'
 3 | import { State } from './state'
 4 | 
 5 | export type Mutations<S = State> = {
 6 |   [MutationTypes.SET_COUNTER](state: S, payload: number): void
 7 | }
 8 | 
 9 | export const mutations: MutationTree<State> & Mutations = {
10 |   [MutationTypes.SET_COUNTER](state, payload: number) {
11 |     state.counter = payload
12 |   },
13 | }
14 | 


--------------------------------------------------------------------------------
/src/store/state.ts:
--------------------------------------------------------------------------------
1 | export const state = {
2 |   counter: 0,
3 | }
4 | 
5 | export type State = typeof state
6 | 


--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import { Store } from '../store'
2 | 
3 | declare module '@vue/runtime-core' {
4 |   interface ComponentCustomProperties {
5 |     $store: Store
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "target": "esnext",
4 |     "strict": true,
5 |     "moduleResolution": "node"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { VueLoaderPlugin } = require('vue-loader')
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 4 | 
 5 | module.exports = (env = {}) => ({
 6 |   mode: env.prod ? 'production' : 'development',
 7 |   devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
 8 |   entry: path.resolve(__dirname, './src/main.ts'),
 9 |   output: {
10 |     path: path.resolve(__dirname, './dist'),
11 |     publicPath: '/dist/',
12 |   },
13 |   resolve: {
14 |     alias: {
15 |       // this isn't technically needed, since the default `vue` entry for bundlers
16 |       // is a simple `export * from '@vue/runtime-dom`. However having this
17 |       // extra re-export somehow causes webpack to always invalidate the module
18 |       // on the first HMR update and causes the page to reload.
19 |       vue: '@vue/runtime-dom',
20 |     },
21 |     extensions: ['.ts', '.js', '.vue'],
22 |   },
23 |   module: {
24 |     rules: [
25 |       {
26 |         test: /\.vue$/,
27 |         use: ['vue-loader'],
28 |       },
29 |       {
30 |         test: /\.tsx?$/,
31 |         loader: 'ts-loader',
32 |         options: {
33 |           appendTsSuffixTo: [/\.vue$/],
34 |         },
35 |       },
36 |       {
37 |         test: /\.png$/,
38 |         use: {
39 |           loader: 'url-loader',
40 |           options: { limit: 8192 },
41 |         },
42 |       },
43 |       {
44 |         test: /\.css$/,
45 |         use: [
46 |           {
47 |             loader: MiniCssExtractPlugin.loader,
48 |             options: { hmr: !env.prod },
49 |           },
50 |           'css-loader',
51 |         ],
52 |       },
53 |     ],
54 |   },
55 |   plugins: [
56 |     new VueLoaderPlugin(),
57 |     new MiniCssExtractPlugin({
58 |       filename: '[name].css',
59 |     }),
60 |   ],
61 |   devServer: {
62 |     inline: true,
63 |     hot: true,
64 |     stats: 'minimal',
65 |     contentBase: __dirname,
66 |     overlay: true,
67 |   },
68 | })
69 | 


--------------------------------------------------------------------------------