Skip to content
On this page

Vue + SASS (Vite) Template

Scripts

The following scripts are available in this project's package.json:

  • dev: Starts the development server on http://localhost:8888.
  • start: Alias for dev.
  • build: Builds the project for production.
  • build:inline: Builds the project for production and prepares it to be inlined.
  • build:iframe: Builds the project for production and prepares it to be embedded via an <iframe>.
  • preview: Serves the dist/ folder on http://localhost:9999.

Project Structure

project
├─ .sf-stuff/ (1)
├─ src/
│  ├─ assets/
│  ├─ components/ (2)
│  ├─ composables/ (3)
│  ├─ public/ (4)
│  ├─ scss/
│  ├─ App.vue (5)
│  ├─ auto-imports.d.ts (6)
│  ├─ components.d.ts (7)
│  ├─ env.d.ts (8)
│  ├─ index.html
│  └─ main.ts
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc
├─ package.json
├─ postcss.config.cjs (9)
├─ README.md
├─ tsconfig.json (10)
├─ tsconfig.node.json (11)
└─ vite.config.ts (12)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Key Items

  1. Contains build scripts and global variables - you shouldn't need to touch these files.

  2. Contains Vue components. Components in this directory are automatically globally imported (see #7).

  3. Contains Vue composables. Composables in this directory are automatically globally imported (see #6).

  4. Contains files to be served at https://website.com/[file]; usually social images (learn more).

  5. Entry point to the Vue application.

  6. TypeScript declaration file created by unplugin-auto-import. Automatically updates to allow for Vue Composition API methods and Vue composables to be used without needing to import them - you shouldn't need to touch this file.

  7. TypeScript declaration file created by unplugin-vue-components. Automatically updates to allow for Vue components to be used without needing to import them - you shouldn't need to touch this file.

  8. TypeScript declaration file containing types for Vue and Vite - you shouldn't need to touch this file.

  9. Configuration file for PostCSS.

  10. Configuration file for TypeScript used in src/ (.vue, .ts or .d.ts files).

  11. Configuration file for TypeScript used by Vite.

  12. Configuration file for Vite.

Helpful Docs