16 |
17 |
35 |
47 |
48 |
49 |
62 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 |
3 | // import "./assets/styles/vars.css";
4 | // import "./styles/base.css";
5 |
6 | import "./assets/styles/base.css";
7 | import "./assets/styles/custom.css";
8 | import App from "./App.vue";
9 | import { router } from "./router";
10 | import { loadIcons } from "@/utils/icons";
11 | import { initAppearance } from "@/composables/useAppConfig";
12 | import { api } from "@/services/api";
13 |
14 | // i18n placeholder 1
15 |
16 | const app = createApp(App);
17 | app.use(router);
18 | loadIcons();
19 | initAppearance();
20 | api.init();
21 | // i18n placeholder 2
22 |
23 | await Promise.all([router.isReady()]);
24 |
25 | app.mount("#app");
26 |
--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHashHistory } from "vue-router";
2 |
3 | import { routes } from "./routes";
4 |
5 | const router = createRouter({
6 | history: createWebHashHistory(),
7 | routes,
8 | });
9 |
10 | export { router };
11 |
--------------------------------------------------------------------------------
/src/router/routes.ts:
--------------------------------------------------------------------------------
1 | import type { RouteRecordRaw } from "vue-router";
2 | import HomeView from "@/views/HomeView.vue";
3 | import AboutView from "@/views/AboutView.vue";
4 | import ContactsView from "@/views/ContactsView.vue";
5 |
6 | const routes: RouteRecordRaw[] = [
7 | {
8 | path: "/",
9 | name: "home",
10 | component: HomeView,
11 | },
12 | {
13 | path: "/contacts",
14 | name: "contacts",
15 | component: ContactsView,
16 | },
17 | {
18 | path: "/about",
19 | name: "about",
20 | component: AboutView,
21 | },
22 | ];
23 |
24 | export { routes };
25 |
--------------------------------------------------------------------------------
/src/services/api/http.ts:
--------------------------------------------------------------------------------
1 | // import axios from "axios";
2 | // import type { AxiosRequestConfig } from "axios";
3 | // import HttpRequest from "./xhr";
4 |
5 | interface IOptions {
6 | baseUrl: string
7 | headers?: Record
38 |
39 |
41 |
42 |
44 |
45 |
153 |
164 |
--------------------------------------------------------------------------------
/src/utils/injections/sw.js:
--------------------------------------------------------------------------------
1 | if ("serviceWorker" in navigator) {
2 | navigator.serviceWorker.register("/service-worker.js");
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/locales/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "msg": "Hello"
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/locales/es.json:
--------------------------------------------------------------------------------
1 | {
2 | "msg": "Hola"
3 | }
4 |
--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
154 | 
155 |
156 |
162 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | project-name
163 |
5 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/views/ContactsView.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 | About this tool
6 |7 | The goal of the `create-vue-webapp` tool is to allow users to scaffold a new customizable vue web 8 | application. 9 |
10 |-
11 |
- 12 | Create a simple working SPA front-end application for a specific task in a few minutes, style it and 13 | fill it with content in a few hours. 14 | 15 |
- Customize it with small functional code blocks. 16 |
- 17 | Collect and summarize the best techniques and practices for building a modern reactive frontend. 18 | 19 |
- 20 | Enable novice developers to learn frontend and Vue 3 best practices from building application 21 | architecture to naming CSS classes with ready-made examples. 22 | 23 |
- 24 | Enable experienced developers to quickly and more efficiently reuse overused boilerplate code, 25 | especially that which cannot be distributed as NPM packages. 26 | 27 |
-
28 | This application should act as a website builder, with the ability to choose when creating:
29 |
-
30 |
- A global business website template (portfolio, blog, online store, etc.) 31 |
- A variant of the general layout of the web application 32 |
- Variants of specific components (header, footer, sidebar, etc.) 33 |
- General style/design options 34 |
- 35 | Separate functionality injected as functional fragments (API module, i18n, PWA, splash screen, 36 | auth module, themes, etc.) 37 | 38 |
- Ability to connect/integrate common libraries (including UI) if desired 39 |
- Possibility to integrate with certain headless CRM and other backend API services. 40 |
42 |
26 |
56 |
57 |
58 |
59 |
111 |
--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 | Share your feedback
27 |28 | Thanks for sending us your ideas! 29 |
30 |31 | 32 | This form does not work. Please use 33 | 34 | GitHub Issues and Feature requests 35 | instead. 36 | 37 |
38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
18 |
34 |
35 |
36 |
59 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "lib": ["ES2021", "DOM", "ScriptHost"],
5 | "baseUrl": ".",
6 | "module": "esnext",
7 | "moduleResolution": "node",
8 | "paths": { "@/*": ["./src/*"] },
9 | "resolveJsonModule": true,
10 | "typeRoots": ["./types"],
11 | "allowJs": true,
12 | "outDir": "./dist",
13 | "esModuleInterop": true
14 | // "types": ["node", "vite/client"]
15 | },
16 | "exclude": [
17 | "./dist"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from "node:path";
2 | import { defineConfig } from "vite";
3 | import vue from "@vitejs/plugin-vue";
4 | import { htmlInjectionPlugin } from "vite-plugin-html-injection";
5 | import { htmlInjectionConfig } from "./src/utils/injections/injection-config";
6 |
7 | // import { URL, fileURLToPath } from "node:url";
8 | // https://vitejs.dev/config/
9 | export default defineConfig({
10 | base: "/vue-webapp/",
11 | build: {
12 | target: "esnext",
13 | },
14 | plugins: [
15 | vue(),
16 | htmlInjectionPlugin(htmlInjectionConfig),
17 | ],
18 | resolve: {
19 | alias: {
20 | "@": path.resolve(__dirname, "./src"),
21 | },
22 | },
23 | });
24 |
--------------------------------------------------------------------------------
Congratulations with scaffolding your vue webapp!
19 |20 | Selected options: 21 |
22 |-
23 |
- 28 | {{ option.name }} 29 | {{ option.value }} 30 | 31 |