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

@feathers-nuxt/template-app

v1.0.11

Published

sao template for scaffolding feathers+nuxt apps

Downloads

20

Readme

This is a sao template enabling you to scaffold a feathers+nuxt app in seconds. See documentation site for available features.

THIS IS ALPHA, BE CAREFUL

I'm also VERY interested in feedback / PRs, so send them my way or email me!

Quick Start

Use npx, if you do not have sao installed. npx comes bundled with npm version 5.2+.

npx sao npm:@feathers-nuxt/template-app --update awesome-app

You will be prompted to answer a couple of questions to determine how the template should be customized to your needs. Sao will then clone the template in this repository and put the customized template inside awesome-app directory.

If you already have sao installed globally, just invoke it with this template.

sao npm:@feathers-nuxt/template-app --update awesome-app # downloads template from npm
# sao feathers-nuxt/template-app --update awesome-app # downloads template from github

Installation

You may also use f3 cli instead of sao if you install it globally.

yarn global add @feathers-nuxt/cli
# npm i -g @feathers-nuxt/cli
f3 init awesome-app

yarn is preferred to npm, although you may use the later if you so wish.

Usage

Once your app is initialized, cd awesome-app to access your new project.

To start the application in development mode - watch files for changes and reload - run

yarn dev

If you are using an sql database ensure you run yarn migrate up to create necessary tables, then yarn seed to add test data to the database.

There are several other npm scripts defined in package.json. To list them all, invoke yarn run

Features

  • SSR ready PWA with offline support.
  • User Authentication and Authorization taken care of.
  • Logging mixin for Feathers app backed by winston with file and console transports.
  • End-to-end, hierarchical, real-time, colorful logs and stories with console and websockets transports.
  • Bring your own database or RESTful backend for data storage.
  • Database migration and seeding npm scripts included.
  • Project build and deployment scripts provided.
  • Use any compile to JS langauge supported by webpack: livescipt, coffescript, typescript,
  • Use any compile to CSS language supported by webpack: stylus, sass, less,
  • Use any compile to HTML language supported by webpack: pug, slim, haml,
  • Use HEML markup language for building responsive emails with any compile to HTML language.
  • Notifications service for sending all kinds of transactional alerts via emails, SMS, pushes, webpushes or slack
  • File uploads service with configurable backing storage: Any store that implements the blob store interface.
  • All feathers services automatically available in vuex store.
  • Namespaced routing to prevent conflict of API and UI routes.
  • Optional caching for API routes using Redis on the backend.
  • Automatic caching for API routes using feathers-vuex on the frontend.
  • Automatic caching for UI routes using workbox runtimeCaching.
  • Optional distributed, delayed background job system backed by Redis.
  • iView: A high quality UI Toolkit built on Vue.js
  • DataTable and DataCard UI components compatible with feathers service endpoints.

Guide

An application initialized using f3 will have the following directory stucture.

├── f3.config.js                              # nuxt & backpack configuration
├── .babelrc                                  # babel configuration to use with backpack
├── .podhook                                  # shell commands to run on remote server during deploy
├── .gitignore                                # list of file to ignore while deploying to remote server
└── src
    ├── client                                # transpiled using nuxt
        ├── assets                            # files to transpile with webpack: less, stylus 
        ├── static                            # files to serve as static resources 
        ├── pages                             # Vue SFC accessible via a URL    
        ├── components                        # Vue SFC to use within other SFC
        ├── layouts                           # Vue SFC to use for page layout        
        ├── middleware                        # nuxt renderer middleware      
        ├── modules                           # nuxt modules 
        ├── plugins                           # Vue.js plugins
        ├── store                             # Vuex store modules
        └── utils                             
            ├── initClient.js                     # creates feathers client for server and client bundle
            ├── initAuth.js                       # autheticate and populate store with user object 
            └── store              
                ├── modules                         # modules for vuex
                └── plugins                         # plugins for vuex
    └── server                                # transpiled using backpack
        ├── config                            
            ├── default.yml                        # settings for development env
            ├── production.yml                     # settings for production env
            └── production-0.yml                   # settings for PM2 app instance 0
        ├── index.ls                           # entry to initialize both app and api servers   
        ├── app.ls                             # express server with nuxt middleware and feathers as sub app     
        ├── api.ls                             # feathers server with socket.io and rest transports
        ├── api.hooks.ls                       # configures global api hooks
        ├── hooks                              # triggers run during resource access
            └──global.ls                       # configures global api hooks
        ├── notifications                      # templates and dispatcher for email, sms, webpush,
        ├── services                           # service, schema, model and hooks for resources in db, fs,
            └── auth.ls                            # configures feathers for authentication
        └── db                                 
            ├── orm.ls                             # configures feathers to use mongoose or sequelize ORM
            ├── seed.ls                            # populates database with dummy data
            └── migrations                         # procedures to creates and drop tables
        └── middleware                         
	        └── nuxt.ls                            # nuxt middleware for SSR