Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate project to Vue 3 #19

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
VITE_API_URL=url-to-api-server.com
VITE_API_URL_PREFIXES=development, preview, testing
VITE_USE_TLS=true
VITE_MAPBOX_API_KEY=mapbox-api-key
VITE_BEEKEEPER_PRODUCT=beekeeper-product
VITE_BEEKEEPER_SECRET=beekeeper-secret
VITE_VERSION=1
19 changes: 19 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
env: {
node: true,
es2022: true
}
}
13 changes: 13 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,26 @@ node_modules
/dist

# local env files
.env
.env.local
.env.*.local

# Log files
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*


dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.idea
Expand Down
8 changes: 8 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
46 changes: 46 additions & 0 deletions README-Vue3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# tice-web-vue3

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```
10 changes: 0 additions & 10 deletions babel.config.js

This file was deleted.

1 change: 1 addition & 0 deletions env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
5 changes: 0 additions & 5 deletions example.env.local

This file was deleted.

43 changes: 43 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="description" content="Share your location with TICE and see in real-time where your friends are and where they are heading. Secure by using end-to-end encryption.">
<meta name="author" content="TICE">
<meta name="apple-itunes-app" content="app-id=1494324936">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=9B9XQqKnx0">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=9B9XQqKnx0">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=9B9XQqKnx0">
<link rel="manifest" href="/site.webmanifest?v=9B9XQqKnx0">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=9B9XQqKnx0" color="#2980b9">
<link rel="shortcut icon" href="/favicon.ico?v=9B9XQqKnx0">
<meta name="apple-mobile-web-app-title" content="TICE">
<meta name="application-name" content="TICE">
<meta name="msapplication-TileColor" content="#2980b9">
<meta name="theme-color" content="#ffffff">

<title>TICE – Live & Secure Location Sharing</title>

<meta property="og:title" content="Track my live location with the secure TICE app" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://ticeapp.com" />
<meta property="og:image" content="/OpenGraphTICEimg.png" />
<meta property="og:description" content="Share your location with me, so we find each other easily and feel safe. Meet up easily with TICE." />

<script type="text/javascript">
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
</script>
</head>
<body>
<noscript>
<strong>We're sorry but TICE doesn't work without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Loading