I have been attempting to load and define all my components globally in nuxt.js.
However, I encounter an error when trying to load the *.vue file: "Cannot find module ....".
Despite the fact that the file exists in the specified location...
Below is the loading plugin :
import Vue from 'vue'
import fs from 'fs'
import path from 'path'
const componentDirectory = `.${path.sep}src${path.sep}components`;
const componentTypes = ['atom','molecule','organism'];
function getComponentType(componentName) {
let compGroup = ( componentName || '' ).toLowerCase().split('.');
if (compGroup.length < 3 || compGroup[ compGroup.length - 1 ] !== 'vue' ) {
return null;
}
return compGroup[ compGroup.length - 2 ];
}
function allowedComponentType(componentFileName) {
return componentTypes.indexOf(getComponentType(componentFileName)) !== -1;
}
// Utilizing a synchronous method to list all files in a directory in Node.js recursively
var walkSync = function(dir, filelist) {
var files = fs.readdirSync(dir);
filelist = filelist || [];
files.forEach(function (file) {
if (fs.statSync(dir + path.sep + file).isDirectory()) {
filelist = walkSync(dir + path.sep + file, filelist);
} else if (allowedComponentType(file) ) {
filelist.push(dir + path.sep + file);
}
});
return filelist;
};
walkSync(componentDirectory).forEach(componentFileName => {
try {
let componentPath = path.resolve(path.resolve(), componentFileName);
console.log('Component name : ', componentPath)
const component = require(componentPath).default;
Vue.component(component.name, component);
}
catch (e) {
console.log('Error : ' , e )
}
});
P.S .: Once the issue is resolved, I will replace functions with a regular expression.