npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nx-vue3

v0.0.6

Published

<h2 align='center'>nx-vue3</h2>

Downloads

1

Readme

Table of contents

Features

  • Vue3+Vite+Postcss project generation
  • Vue3+Vite+Postcss library generation
  • Component generation for projects/libraries
  • Vitepress docs project generation

Philosophy

The intent of this plugin is to help generate a Vue3 related projects and components for Nx. The recommended configuration and folder structures are used where possible in order to integrate smoothly. Some path aliases are provided for convenience:

  • @app => <root>/src/app
  • @assets => <root>/src/assets
  • @public => <root>/src/public

One compromise made is keeping index.html in the root folder. Vite strongly suggests this, since it treats index.html as the entry point and requires some configuration to change it.

Plugin Usage

Install

npm

npm install nx-vue3 --save-dev

Generate App

nx g nx-vue3:app <app-name>

Serve

nx serve <app-name>

Recommended VSCode extensions

This plugin adds a few recommended extensions to VSCode. To install them, open VSCode and:

  • Open the command palette [CMD] + [Shift] + [p] and type "Show Recommended Extensions"

  • Review and install extensions under "WORKSPACE RECOMMENDATIONS"

Vue3 Generators

(NX Docs)

Application

nx g nx-vue3:app <app-name> [options]

| Arguments | Description | | --------- | ----------------------------- | | app-name | The name of the generated app |

| Options | Default | Description | | ----------- | ------- | -------------------------------------------- | | --title | - | Project title, defaults to | | --tags | - | Comma delimited tags for linting | | --directory | apps | Workspace directory to place the Vue project |

Component

nx g nx-vue3:component <name> [options]

# Alias
nx g nx-vue3:c <name> [options]

| Arguments | Description | | --------- | -------------------------- | | name | The name of the component. |

| Options | Default | Description | | ----------- | ------- | -------------------------------------------------------------------------------------------- | | --project | - | The name of the project. | | --directory | - | Directory relative to src where the component will be generated | | --lang | ts | Script language: ['ts', 'js'] | | --setup | true | Script setup syntax sugar | | --style | postcss | CSS Preprocessor: ['css', 'scss', 'less', 'stylus', 'postcss'] | | --scoped | false | Whether the component's style block is scoped |

Library

nx g nx-vue3:library <lib-name> [options]

| Arguments | Description | | --------- | --------------------------------- | | lib-name | The name of the generated library |

| Options | Default | Description | | ----------- | ------- | -------------------------------------------- | | --tags | - | Comma delimited tags for linting | | --directory | apps | Workspace directory to place the Vue library |

Vitepress Docs

nx g nx-vue3:docs <app-name> [options]

| Arguments | Description | | --------- | ---------------------------------- | | app-name | The name of the generated docs app |

| Options | Default | Description | | ----------- | ------- | ----------------------------------------------- | | --title | - | Docs title, defaults to | | --tags | - | Comma delimited tags for linting | | --directory | apps | Workspace directory to place the Vitepress docs |

Cypress

Generate a Cypress e2e app targeting an application generated with nx-vue3:app

nx g nx-vue3:cypress <app-name> --project <target-project> [options]

| Arguments | Description | | --------- | -------------------------------------------------------------------------------------------------------------------------- | | app-name | Optional name for the e2e app. You can provide the project option instead, which results in an app named <project>-e2e |

Many Cypress options are available, which you can check here

| Options | Default | Description | | ------------- | ------- | -------------------------------------------------------------------------------------------- | | --project | - | Existing project name to generate e2e testing for | | --tags | - | Comma delimited tags for linting | | --directory | apps | Workspace directory to place the app | | headlessWatch | false | Only valid in headless mode. If true, Cypress will watch for code changes instead of exiting | | headlessCI | true | If env var CI=true, set headless=true and headlessWatch=false |

Vue3 Executors

(NX Docs)

Dev Server

Development server executor for generated Vue3 projects.

nx serve <app-name> [options]

| Arguments | Description | | --------- | -------------------- | | app-name | The name of your app |

| Options | Default | Description | | ------- | --------- | ---------------------------------------------------------------- | | --host | localhost | Server host location | | --port | 3000 | Server port | | --https | false | Run in HTTPS/SSL mode |

Docs Dev Server

Development server executor for generated Vitepress docs projects.

nx serve <app-name> [options]

| Arguments | Description | | --------- | ----------------------------- | | app-name | The name of the Vitepress app |

| Options | Default | Description | | ------- | --------- | ---------------------------------------------------------------- | | --root | docs | Vitepress docs root, relative to the app root | | --host | localhost | Server host location | | --port | 3000 | Server port | | --https | false | Run in HTTPS/SSL mode |

Build

Build executor for generated Vue3 projects and libraries

nx build <app-name> [options]

| Arguments | Description | | --------- | -------------------- | | app-name | The name of your app |

| Options | Default | Description | | ------- | --------- | ----------------------------------------------------------- | | --dist | localhost | Output directory |

Docs Build

Build executor for generated Vitepress docs.

nx build <app-name> [options]

| Arguments | Description | | --------- | ----------------------------- | | app-name | The name of the Vitepress app |

| Options | Default | Description | | ------- | --------- | ----------------------------------------------------------- | | --root | docs | Vitepress docs root, relative to the app root | | --dist | localhost | Output directory |

Lint

nx lint <app-name> [options]

See options for @nrwl/linter

Unit Testing

Note: see vite-jest section for progress on testing code that relies on Vite transforms.

nx test <app-name> [options]

See options for @nrwl/jest

E2E Testing

Generator TBD

nx e2e <app-name> [options]

See options for @nrwl/cypress

Workarounds

Documentation for non-ideal setup that should be removed or replaced when possible.

dep-graph hack

In order to get nx dep-graph to work in a generated Vue app, the NX code responsible for parsing file extension must be patched.

The build and serve executors in this plugin automatically check your workspace node_modules to see if the patch is already installed, and installs if not. See packages/vue3-vite/patch-nx-dep-graph.js.

Patch details: https://github.com/ZachJW34/nx-plus/tree/master/libs/vue#nx-dependency-graph-support

Related NX issue: https://github.com/nrwl/nx/issues/2960

vite-jest

Currently, unit tests will throw warnings when mounting Vue components that rely on code transforms from Vite plugins. This is because Jest does not know about Vite, and relies directly on SFC compilation from vue3-jest. The [vite-jest] project will eventually solve this problem, or we may implement our own transformer. The main issue now is Vite requires async for dependency resolution and transforming code, but Jest support is rudimentary/alpha.