Skip to content

A starter template for projects using Sveltekit, Typescript, Tailwind and Pug.

License

Notifications You must be signed in to change notification settings

kevinpeckham/sveltekit-typescript-tailwind-pug-starter

Repository files navigation

Svelte Typescript Tailwind Pug Starter Template

A starter template to help you quickly launch a new project with Svelte / Sveltekit, Typescript, TailwindCSS, Pug. I call it the "Skinnypug" stack.  

0. Contents

  1. About this Template
  2. Dependencies
  3. Getting Started
  4. About Sveltekit
  5. Using Pug with Svelte
  6. Folder Shortcuts
  7. Editor & Extensions

1. About This Template

This starter was developed for the Lightning Jar team. It's designed to get one up and running quickly on a new project using the core technologies Svelte, Sveltekit, Typescript, TailwindCSS, Pug + a few other bells and whistles ( see the full breakdown below).

2. Dependencies

A. Frameworks & Build

B. Scripting / Typescript

C. Templating / Pug

  • Pug - HTML template engine

D. CSS / TailwindCSS

E. Formatting / Prettier

F. Linting / ESLint

G. Testing

3. Getting Started

A. Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

B. Building

To create a production version of your app:

npm run build

C. Preview

You can preview the production build with npm run preview.

 

4. About SvelteKit

Sveltekit is a new framework for building web applications. It's built on top of Svelte, which is a component framework for building user interfaces. Sveltekit is a great tool for building modern web applications.

If you get stuck working with SvelteKit you can reach out for help in the SvelteKit Discord chatroom.

 

5. Using Pug with Svelte

I love Pug, and the first thing I figured out when I started working with Svelte, was how to use Pug inside Svelte files. Thankfully other devs had already solved the technical challenges for me.

This starter uses the svelte-preprocess package.It is a Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more.

Note: Special syntax is required to write Pug inside Svelte templates. Some basics are included below. You can learn more here.**

 

A. How to write Svelte's Template Syntax using Pug Mixins

Because some of Svelte's template syntax is invalid in Pug svelte-preprocess provides some pug mixins to represent svelte's {#...}{/...} blocks: +if(), +else(), +elseif(), +each(), +key(), +await(), +then(), +catch(), +html(), +const(), +debug().

ul
	+if('posts && posts.length > 1')
		+each('posts as post')
			li
				a(
					href="blog/{post.slug}",
					rel="prefetch") {  post.title  }
		+else
			span No posts :c

 

B. Svelte Element Attributes and Callbacks Using Pug

Pug encodes everything inside an element attribute to html entities, so attr="{foo && bar}" becomes attr="foo && bar". To prevent this from happening, instead of using the = operator use != which won't encode your attribute value:

button(disabled!="{ foo && bar }")

This is also necessary to pass callbacks:

button(on:click!="{ (e) => doTheThing(e) }")

It is not possible to use template literals for attribute values. You can't write attr=`Hello ${value ? 'Foo' : 'Bar'}`, instead write attr="Hello {value ? 'Foo' : 'Bar'}".

 

C. Spreading props in Svelte using Pug

To spread props into a pug element, wrap the {...object} expression with quotes ".

This:

button.big(
	disabled,
	type="button",
	{...slide.props}) Send

Becomes:

<button
	class="big"
	type="button"
	disabled
	{...slide.props}
>
	Send
</button>

 

D. Svelte Element Directives using Pug

Syntax to use Svelte Element directives with Pug

input(bind:value="{ foo }")
input(on:input="{ bar }")

 

6. Folder Shortcuts

The following shortcuts and corresponding folders come pre-configured in this template:

  • $atoms: './src/lib/components/atoms'
  • $assets: "./src/lib/assets",
  • $components: './src/lib/components'
  • $data: '.src/lib/data'
  • $lib: './src/lib'
  • $molecules: './src/lib/components/molecules'
  • $organisms: './src/lib/components/organisms'
  • $stores: './src/lib/stores'
  • $tools: './src/lib/tools'
  • $types: './src/lib/types'
  • $utils: './src/lib/utils'

  

7. Editor & Extensions

If you are using VSCode, we recommend these extensions:

About

A starter template for projects using Sveltekit, Typescript, Tailwind and Pug.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published