Skip to content

Commit 1127fa1

Browse files
authored
vue-standalone (#68)
* vue-standalone * vue-standalone updated * update vue-standalone readme * update vue-standalone recipe
1 parent ad19cfc commit 1127fa1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+14450
-0
lines changed

vue-standalone/.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

vue-standalone/.eslintrc.base.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"root": true,
3+
"ignorePatterns": ["**/*"],
4+
"plugins": ["@nx"],
5+
"overrides": [
6+
{
7+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
8+
"rules": {
9+
"@nx/enforce-module-boundaries": [
10+
"error",
11+
{
12+
"enforceBuildableLibDependency": true,
13+
"allow": [],
14+
"depConstraints": [
15+
{
16+
"sourceTag": "*",
17+
"onlyDependOnLibsWithTags": ["*"]
18+
},
19+
{
20+
"sourceTag": "type:feature",
21+
"onlyDependOnLibsWithTags": ["type:feature", "type:ui"]
22+
},
23+
{
24+
"sourceTag": "type:ui",
25+
"onlyDependOnLibsWithTags": ["type:ui"]
26+
},
27+
{
28+
"sourceTag": "scope:orders",
29+
"onlyDependOnLibsWithTags": [
30+
"scope:orders",
31+
"scope:products",
32+
"scope:shared"
33+
]
34+
},
35+
{
36+
"sourceTag": "scope:products",
37+
"onlyDependOnLibsWithTags": ["scope:products", "scope:shared"]
38+
},
39+
{
40+
"sourceTag": "scope:shared",
41+
"onlyDependOnLibsWithTags": ["scope:shared"]
42+
}
43+
]
44+
}
45+
]
46+
}
47+
},
48+
{
49+
"files": ["*.ts", "*.tsx"],
50+
"extends": ["plugin:@nx/typescript"],
51+
"rules": {}
52+
},
53+
{
54+
"files": ["*.js", "*.jsx"],
55+
"extends": ["plugin:@nx/javascript"],
56+
"rules": {}
57+
}
58+
]
59+
}

vue-standalone/.eslintrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"ignorePatterns": ["!**/*"],
3+
"overrides": [
4+
{
5+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
6+
"rules": {
7+
"vue/multi-word-component-names": "off"
8+
}
9+
}
10+
],
11+
"extends": [
12+
"plugin:vue/vue3-essential",
13+
"eslint:recommended",
14+
"@vue/eslint-config-typescript",
15+
"@vue/eslint-config-prettier/skip-formatting",
16+
"./.eslintrc.base.json"
17+
]
18+
}

vue-standalone/.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
dist
5+
tmp
6+
/out-tsc
7+
8+
# dependencies
9+
node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
yarn-error.log
34+
testem.log
35+
/typings
36+
37+
# System Files
38+
.DS_Store
39+
Thumbs.db
40+
41+
.nx/cache

vue-standalone/.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Add files here to ignore them from prettier formatting
2+
/dist
3+
/coverage
4+
/.nx/cache

vue-standalone/.prettierrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"nrwl.angular-console",
4+
"esbenp.prettier-vscode",
5+
"dbaeumer.vscode-eslint"
6+
]
7+
}

vue-standalone/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Tutorial: Standalone Vue Application
2+
3+
[![standalone application](https://img.shields.io/static/v1?label=Nx%20setup&message=standalone%20app&color=blue)](https://nx.dev/concepts/integrated-vs-package-based#standalone-applications)
4+
5+
Source code for the Vue standalone application tutorial on the Nx docs:
6+
- Tutorial: https://nx.dev/getting-started/vue-standalone-tutorial
7+
8+
## What's inside?
9+
10+
This example contains a single Vue application that has been generated with the `vue-standalone` preset. It contains a single root-level application and local libraries within the `modules` folder.
11+
12+
Follow through the tutorial linked above for more details.
13+
14+
## How to run it
15+
16+
Install all dependencies using `npm install`. You can then run commands Like
17+
18+
- `npx nx serve` to serve the app
19+
- `npx nx build` to build the Vue application
20+
- you can use `npx nx graph` to visualize the structure
21+
22+
## Learn more
23+
24+
- [Video: Standalone Applications with Nx](https://youtu.be/qEaVzh-oBBc)

vue-standalone/e2e/.eslintrc.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": [
3+
"plugin:cypress/recommended",
4+
"../.eslintrc.json",
5+
"../.eslintrc.base.json"
6+
],
7+
"ignorePatterns": ["!**/*"],
8+
"overrides": [
9+
{
10+
"files": ["*.js", "*.jsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

vue-standalone/e2e/cypress.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from 'cypress';
2+
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
3+
4+
export default defineConfig({
5+
e2e: nxE2EPreset(__dirname, {
6+
bundler: 'vite',
7+
}),
8+
});

vue-standalone/e2e/project.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "e2e",
3+
"$schema": "../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "e2e/src",
5+
"projectType": "application",
6+
"targets": {
7+
"e2e": {
8+
"executor": "@nx/cypress:cypress",
9+
"options": {
10+
"cypressConfig": "e2e/cypress.config.ts",
11+
"devServerTarget": "myvueapp:serve:development",
12+
"testingType": "e2e"
13+
},
14+
"configurations": {
15+
"production": {
16+
"devServerTarget": "myvueapp:serve:production"
17+
},
18+
"ci": {
19+
"devServerTarget": "myvueapp:serve-static"
20+
}
21+
}
22+
},
23+
"lint": {
24+
"executor": "@nx/eslint:lint",
25+
"outputs": ["{options.outputFile}"],
26+
"options": {
27+
"lintFilePatterns": ["e2e/**/*.{js,ts}"]
28+
}
29+
}
30+
},
31+
"tags": [],
32+
"implicitDependencies": ["myvueapp"]
33+
}

vue-standalone/e2e/src/e2e/app.cy.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getGreeting } from '../support/app.po';
2+
3+
describe('myvueapp', () => {
4+
beforeEach(() => cy.visit('/'));
5+
6+
it('should display welcome message', () => {
7+
// Custom command example, see `../support/commands.ts` file
8+
cy.login('[email protected]', 'myPassword');
9+
10+
// Function helper example, see `../support/app.po.ts` file
11+
getGreeting().contains('Welcome');
12+
});
13+
});
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Using fixtures to represent data",
3+
"email": "[email protected]"
4+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const getGreeting = () => cy.get('h1');
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// ***********************************************
2+
// This example commands.js shows you how to
3+
// create various custom commands and overwrite
4+
// existing commands.
5+
//
6+
// For more comprehensive examples of custom
7+
// commands please read more here:
8+
// https://on.cypress.io/custom-commands
9+
// ***********************************************
10+
11+
// eslint-disable-next-line @typescript-eslint/no-namespace
12+
declare namespace Cypress {
13+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
14+
interface Chainable<Subject> {
15+
login(email: string, password: string): void;
16+
}
17+
}
18+
//
19+
// -- This is a parent command --
20+
Cypress.Commands.add('login', (email, password) => {
21+
console.log('Custom command example: Login', email, password);
22+
});
23+
//
24+
// -- This is a child command --
25+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
26+
//
27+
//
28+
// -- This is a dual command --
29+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
30+
//
31+
//
32+
// -- This will overwrite an existing command --
33+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

vue-standalone/e2e/src/support/e2e.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// ***********************************************************
2+
// This example support/index.js is processed and
3+
// loaded automatically before your test files.
4+
//
5+
// This is a great place to put global configuration and
6+
// behavior that modifies Cypress.
7+
//
8+
// You can change the location of this file or turn off
9+
// automatically serving support files with the
10+
// 'supportFile' configuration option.
11+
//
12+
// You can read more here:
13+
// https://on.cypress.io/configuration
14+
// ***********************************************************
15+
16+
// Import commands.js using ES2015 syntax:
17+
import './commands';

vue-standalone/e2e/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../tsconfig.base.json",
3+
"compilerOptions": {
4+
"sourceMap": false,
5+
"moduleResolution": "node",
6+
"outDir": "../dist/out-tsc",
7+
"allowJs": true,
8+
"types": ["cypress", "node"]
9+
},
10+
"include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
11+
}

vue-standalone/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>myvueapp</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": [
3+
"plugin:vue/vue3-essential",
4+
"eslint:recommended",
5+
"@vue/eslint-config-typescript",
6+
"@vue/eslint-config-prettier/skip-formatting",
7+
"../../.eslintrc.base.json"
8+
],
9+
"ignorePatterns": ["!**/*"],
10+
"overrides": [
11+
{
12+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
13+
"rules": {
14+
"vue/multi-word-component-names": "off"
15+
}
16+
}
17+
]
18+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# orders
2+
3+
This library was generated with [Nx](https://nx.dev).
4+
5+
## Running unit tests
6+
7+
Run `nx test orders` to execute the unit tests via [Vitest](https://vitest.dev/).
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "@myvueapp/orders",
3+
"version": "0.0.1",
4+
"main": "./index.js",
5+
"types": "./index.d.ts",
6+
"exports": {
7+
".": {
8+
"import": "./index.mjs",
9+
"require": "./index.js"
10+
}
11+
}
12+
}

0 commit comments

Comments
 (0)