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

vuequery

v2.1.1

Published

Traverse Vue's component tree with ease

Downloads

293

Readme

VueQuery Build Status

Traverse Vue's component tree with ease.

IMPORTANT: Vue's reactivity/event system is extremely powerful and flexible, and should have 99.99% of your use cases covered. In fact, having to traverse the component tree almost always means you're doing Vue wrong. There are certain edge cases, however, when such is required, and this library aims to aid you there.

Installation & Usage

This plugin is only tested for Vue 2.

Installation

Browser

Include vuequery.min.js as a script:

<script src="dist/vuequery.min.js"></script>

Now VueQuery should be avaiable as a global function.

Node.js

First, require VueQuery as a dependency with npm or yarn:

npm install vuequery
yarn add vuequery

Then, import it:

import VueQuery from 'vuequery'
// You can also alias the import as $ for a jQuery-like experience
import $ from 'vuequery'

Usage

Similar to jQuery, calling VueQuery() on a Vue component returns a VueQuery instance which exposes several API's to let you traverse through Vue's component tree.

// assuming we're currently in a Vue component context
// init a VueQuery instance on the current component
const $vm = VueQuery(this)

// get the original Vue component
$vm.vm

// get the immediate next sibling of the component
$vm.next()

// chaining is supported
$vm.prev('foo').children()[0].find('bar')

API

As VueQuery is heavily inspired by jQuery, its API signatures are very similar (albeit much less sophisticated) to that of jQuery's traversing module. In fact, the documentation here is more or less copied from jQuery's. Differences, if any, will be explicitly specified.

children([selector])

Description: Get the children of the current component, optionally filtered by a selector, which can be either

  • a string, in which case it will match the components by name. Obviously, for this to work, your components should have the name option. This is a good Vue practice anyway.
  • a Vue instance
  • a VueQuery instance, in which case it will match the encapsulated Vue instance

Return Values: Array.<VueQuery>|[]

closest(selector)

Description: Get the first component that matches the selector by testing the current component itself and traversing up through its ancestors in the component tree.

Return Values: VueQuery|null

find(selector)

Description: Get the descendants of the current component, filtered by a selector.

Return Values: Array.<VueQuery>|[]

has(selector)

Note: This API's behavior is different from its jQuery counterpart.

Description: Check if the current component has any component that matches the selector in its descendant tree.

Return Values: Boolean

is(selector)

Description: Check if the current component matches the selector.

Return Values: Boolean

next([selector])

Description: Get the immediately following sibling of the current component. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Return Values: VueQuery|null

nextAll([selector])

Description: Get all following siblings of the current component, optionally filtered by a selector.

Return Values: Array.<VueQuery>|[]

nextUntil([selector][, filter])

Description: Get all following siblings of the current component, up to but not including the component matched by the selector passed. If the selector is not matched or is not supplied, all following siblings will be selected; in these cases it selects the same components as the .nextAll() method does when no selector is provided.

The method optionally accepts a filter expression for its second argument. If this argument is supplied, the components will be filtered by testing whether they match it.

Return Values: Array.<VueQuery>|[]

parent([selector])

Description: Get the parent of the current component. If the selector is supplied, the parent component will only be returned if it matches it.

Return Values: VueQuery|null

parents([selector])

Description: Get the ancestors of the current component, optionally filtered by a selector.

Return Values: Array.<VueQuery>|[]

parentsUntil([selector][, filter])

Description: Get the ancestors of the current component, up to but not including the component matched by the selector passed. If the selector is not matched or is not supplied, all ancestors will be selected; in these cases it selects the same components as the .parents() method does when no selector is provided.

The method optionally accepts a filter expression for its second argument. If this argument is supplied, the components will be filtered by testing whether they match it.

Return Values: Array.<VueQuery>|[]

prev([selector])

Description: Get the immediately preceding sibling of the current component. If a selector is provided, it retrieves the previous sibling only if it matches that selector.

Return Values: VueQuery|null

prevAll([selector])

Description: Get all preceding siblings of the current component, optionally filtered by a selector.

Return Values: Array.<VueQuery>|[]

prevUntil([selector][, filter])

Description: Get all preceding siblings of the current component, up to but not including the component matched by the selector passed. If the selector is not matched or is not supplied, all preceding siblings will be selected; in these cases it selects the same components as the .nextAll() method does when no selector is provided.

The method optionally accepts a filter expression for its second argument. If this argument is supplied, the components will be filtered by testing whether they match it.

siblings([selector])

Description: Get the siblings of the current component, optionally filtered by a selector. The original component is not included among the siblings.

Return Values: Array.<VueQuery>|[]

License

MIT © Phan An