@gb-nx/svelte NPM

@gb-nx/svelte

This library was generated with Nx.

See the NX Discussion of first class support for Sveltekit. You may not need this plugin.

Nx Plugin for managing svelte-kit applications in your Nx workspace

Features

Here is a list of some of the coolest features of the plugin:

✅ You work with the routes and components and the plugin manages boilerplate
✅ Building, testing, linting your projects

Prerequisite

If you have not already, create an Nx workspace with the following:

# npm
npx create-nx-workspace@latest

# yarn
yarn create nx-workspace@latest

Getting Started

Then you need to install the plugin in order to work with svelte applications later on.

Installing Plugin

nx add @gb-nx/svelte

Generating Project

The plugin will create an Nx project for an existing svelte-kit application. Do so with commands similar to the following

npx create-nx-workspace@latest sample-workspace --preset apps
cd sample-workspace/apps
npm create svelte@latest web
cd web
npm install
cd ..\..
nx g @gb-nx/svelte:application web
nx build web
nx lint web
nx test web

Add a route

nx g @gb-nx/svelte:route admin/[area] --project web

Option	Type	Description
name	string	The name of the route.
project	string	The Svelte project to target.
directory	string	Directory where the generated files are placed.
skipFormat	boolean	Skip formatting files.
skipTests	boolean	Do not create 'spec' test file for the route.
language	string	Route script language (ts/js).
style	string	Route style language (css/scss).
load	string	Source of data for your load function
runes	boolean	Use svelte runes (requires svelte >=5)

Add a component

nx g @gb-nx/svelte:component SocialMedia --project web

Option	Type	Description
name	string	The name of the component.
project	string	The Svelte project to target.
directory	string	Directory where the component is placed, relative to your Svelte project lib folder.
skipFormat	boolean	Skip formatting files.
language	string	Component script language (ts/js).
style	string	Component style language (css/scss).
runes	boolean	Use svelte runes (requires svelte >=5)

Add a lib dependency

The generator will

add an alias to your svelte.config.js for importing a workspace library in your SvelteKit application
add an implicit dependency to the SvelteKit project

nx g @gb-nx/svelte:dependency --project web --dependency my-lib

Option	Type	Description
project	string	The project to add the dependency src to
dependency	string	The dependent project to add
scope	string	The scope to prepend to the dependency name for the alias name (without the @)
skipFormat	boolean	Skip formatting files.

Migrations

This plugin supports Nx migrations and provides necessary version and code updates. So instead of bumping plugin version manually in package.json it's recommended to run nx migrate @gb-nx/svelte command, that includes bumping the version of the @gb-nx/svelte plugin, related dependencies and running code migrations.