Building a Nuxt CLI using NPM in Advanced

Hi CelSius, — that’s how i call my pal 😆

After building the Nuxt-CLI using NPM, now we are going to create more code.

Yes, we are going to add the basic content inside our generated files.

Repository Preparation

I’m using the existing Github for this Nuxt CLI project :

https://github.com/sherlyfebrianti96/Nuxt-CLI

Just go to the existing Nuxt-CLI folder in your local computer, or you can clone it again to your local repository.

git clone https://github.com/sherlyfebrianti96/Nuxt-CLI.git

Refactoring the schematic-item and available-file-extensions

Based on the existing code in https://github.com/sherlyfebrianti96/Nuxt-CLI, i’m moving the schematic-item.js to lib/general folder to make the structure more clean.

Create a new file lib/general/available-file-extensions.js and move the variable availableFileExtensions inside lib/execute-schematic.js .

const schematicItem = require('./schematic-item');

module.exports = [
    {name: '.en-US.json', schematic: [schematicItem.component, schematicItem.page]},
    {name: '.id-ID.json', schematic: [schematicItem.component, schematicItem.page]},
    {name: '.spec.js', schematic: [schematicItem.component, schematicItem.page]},
    {name: '.vue', schematic: [schematicItem.component, schematicItem.page, schematicItem.layout, schematicItem.store]}
];

Create the Content Generator

Create the lib/generate-file-content.js as the content-generator’s container.

const schematicItem = require('./general/schematic-item');

run = (schematic, folderName, itemName) => {
    let content = '';
    switch(true) {
        case (schematic === schematicItem.component) :
            // generate file content for component
            break;
        case (schematic === schematicItem.layout) :
            // generate file content for layout
            break;
        case (schematic === schematicItem.page) :
            // generate file content for page
            break;
        case (schematic === schematicItem.store) :
            // generate file content for store
            break;
        default:
            // do nothing when schematic is random
            break;
    }

    return content;
};

module.exports = {
    run
};

And then call it in lib/execute-schematic.js.

...
const generateFileContent = require('./generate-file-content');
...
generateFileStructure = (schematic, fileExtenstions, folderName, itemName) => {
    fileExtenstions.forEach(fileExtension => {
        ...
        const content = generateFileContent.run(schematic, folderName, itemName);
        fs.writeFile(file, content, function(err) {});
    });
}

generateItem = (schematic, folderName, itemName) => {
    ...
    generateFileStructure(schematic, fileExtensions, folderName, itemName);
}

...

Create the Content Generator for Layout

Create a new lib/generate-content-layout.js.

function camelize(text) {
    return pascalCase(text).substr(0, 1).toLowerCase() + text.substr(1);
}

function pascalCase(text) {
    text = text.replace(/[-_\s.\/]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
    return text.substr(0, 1).toUpperCase() + text.substr(1);
}

run = (schematic, folderName, itemName) => {
    const content = [];

    content.push('<template>');
    content.push('  <div>');
    content.push(`    ${schematic} content.`);
    content.push('    <Nuxt />');
    content.push('  </div>');
    content.push('</template>\n');

    content.push('<script lang="ts">');
    content.push('export default {');
    content.push(`  name: \'Layout${pascalCase(itemName)}\',`);
    content.push('}');
    content.push('</script>\n');

    content.push('<style lang="scss" scoped>');
    content.push('/* Styles for this component */');
    content.push('</style>\n');

    content.push('');

    return content.join('\n');
};

module.exports = {
    run
};

Import and use the lib/generate-content-layout.js into your lib/generate-file-content.js.

...
const generateContentLayout = require('./generate-content-layout');

run = (schematic, folderName, itemName) => {
    ...
    switch(true) {
        ...
        case (schematic === schematicItem.layout) :
            // generate file content for layout
            content = generateContentLayout.run(schematic, folderName, itemName);
            break;
        ...
    }

    ...
};

...

Move the camelCase and PascalCase as a separate library

Create a new file lib/general/pascal-case.js and move the function here.

module.exports = (text) => {
    text = text.replace(/[-_\s.\/]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
    return text.substr(0, 1).toUpperCase() + text.substr(1);
}

Create a new file lib/general/camel-case.js and move the function here.

const pascalCase = require('./pascal-case');

module.exports = (text) => {
    return pascalCase(text).substr(0, 1).toLowerCase() + text.substr(1);
}

Remove the camelCase and pascalCase function in lib/generate-content-layout.js and replace it with the lib usage.

const pascalCase = require('./general/pascal-case');

Create the Content Generator for Component/Page/Store

Create a new file under lib folder.

And then we create the rest of the file based on our preference.

To see what is the changes in this project, you can see the commit on this repository for more details about the content I have created.

Publish to NPM Package

After all has been finished and finalized, we need to update the version and publish to the NPM Package.

Summary

If you don’t like the long explanation, here is the checklist you have to do :

• Repository Preparation
• Refactoring the schematic-item and available-file-extensions
• Create the Content Generator
• Create the Content Generator for Layout
• Move the camelCase and PascalCase as a separate library
• Create the Content Generator for Component/Page/Store
• Publish to NPM Package

Now, you are good to go. Cheers!

Resources

Building a Nuxt CLI using NPM

Publish the Nuxt CLI to NPM Package