@thinkpixellab-public/px-vue v3.0.96

px-vue

General purpose vue components that can be used across projects.

Instructions

There is a basic dev environment in this project that use the VueCLI to serve the contents of dev.vue. This file can be thought of as a scratch file and shouldn't contain anything that needs to be preserved.

Structure

There is no primary entry point into this package so individual components or other files need to be imported directly. The package uses the same project structure as most of our other Vue projects (e.g. components in the /components folder, etc.).

import PxToggle from '@thinkpixellab-public/px-vue/components/PxToggle.vue';

Dependency on px-styles

TLDR;

When you import a component in your Vue project you may also need to include a file at the root of your project called /px-styles.config.scss that configures px-styles. If that file isn't present, many of the components in this package won't build.

The most basic version of this file looks like this:

/*
    px-styles.config.scss
*/

// import the library (so we can configure it)
@use '@thinkpixellab-public/px-styles' as px;

// add configuration as needed (this is optional)
@include px.config('colors:accent', purple);

// initialize
@include px.init();

Longer Explanation

Many of the components require px-styles. To ensure that px-styles has been initialized in the context of the project where the components are being used (e.g. has the correct configuration settings from the project, not arbitrary defaults or configuration set here), the components need to be able to reference a config file from that project.

Here's the werid problem in a nutshell:

1. SomeProject imports PxToggle.vue from @thinkpixellab\px-vue
2. PxToggle style section imports px-styles from @thinkpixellab/px-styles
3. px-styles needs to be configured somehow but that configuration should come from SomeProject and sass is really bad at figuring that out dynamically.

So, the solution becomes:

1. PxToggle looks for a file called px-styles.scss at the root of SomeProject which it expects to do the job of configuring px-styles.

Because we use a hard coded path to px-styles.scss, that file will get resolved within the project that is importing the component instead the root of this package.

Aliasing a Local Version During Development

To resolve @thinkpixellab-public/px-vue from a local folder during development, you can extend webpack as follows

const path = require('path');

// add to webpack config
{
    resolve: {
        alias: {
            '@thinkpixellab-public/px-vue': path.resolve(__dirname, '../px-vue'),
        },
    }
}

Note that if using vue-cli you need to add the above to a file called vue.config.js in the project root that looks like this:

module.exports = {
    configureWebpack: {
        // add the config from above
    },
};