vue-enterprise-boilerplate | opinionated architecture and dev environment | Frontend Framework library

 by   bencodezen JavaScript Version: Current License: MIT

kandi X-RAY | vue-enterprise-boilerplate Summary

vue-enterprise-boilerplate is a JavaScript library typically used in User Interface, Frontend Framework, Vue applications. vue-enterprise-boilerplate has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questions, feedback, and for now, even bikeshedding are welcome. . A big thanks to Chris Fritz for the incredible work that he did to make this resource possible.
    Support
      Quality
        Security
          License
            Reuse
            Support
              Quality
                Security
                  License
                    Reuse

                      kandi-support Support

                        summary
                        vue-enterprise-boilerplate has a medium active ecosystem.
                        summary
                        It has 7634 star(s) with 1328 fork(s). There are 211 watchers for this library.
                        summary
                        It had no major release in the last 6 months.
                        summary
                        There are 27 open issues and 151 have been closed. On average issues are closed in 52 days. There are 2 open pull requests and 0 closed requests.
                        summary
                        It has a neutral sentiment in the developer community.
                        summary
                        The latest version of vue-enterprise-boilerplate is current.
                        This Library - Support
                          Best in #Frontend Framework
                            Average in #Frontend Framework
                            This Library - Support
                              Best in #Frontend Framework
                                Average in #Frontend Framework

                                  kandi-Quality Quality

                                    summary
                                    vue-enterprise-boilerplate has 0 bugs and 0 code smells.
                                    This Library - Quality
                                      Best in #Frontend Framework
                                        Average in #Frontend Framework
                                        This Library - Quality
                                          Best in #Frontend Framework
                                            Average in #Frontend Framework

                                              kandi-Security Security

                                                summary
                                                vue-enterprise-boilerplate has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
                                                summary
                                                vue-enterprise-boilerplate code analysis shows 0 unresolved vulnerabilities.
                                                summary
                                                There are 0 security hotspots that need review.
                                                This Library - Security
                                                  Best in #Frontend Framework
                                                    Average in #Frontend Framework
                                                    This Library - Security
                                                      Best in #Frontend Framework
                                                        Average in #Frontend Framework

                                                          kandi-License License

                                                            summary
                                                            vue-enterprise-boilerplate is licensed under the MIT License. This license is Permissive.
                                                            summary
                                                            Permissive licenses have the least restrictions, and you can use them in most projects.
                                                            This Library - License
                                                              Best in #Frontend Framework
                                                                Average in #Frontend Framework
                                                                This Library - License
                                                                  Best in #Frontend Framework
                                                                    Average in #Frontend Framework

                                                                      kandi-Reuse Reuse

                                                                        summary
                                                                        vue-enterprise-boilerplate releases are not available. You will need to build from source code and install.
                                                                        summary
                                                                        Installation instructions are not available. Examples and code snippets are available.
                                                                        This Library - Reuse
                                                                          Best in #Frontend Framework
                                                                            Average in #Frontend Framework
                                                                            This Library - Reuse
                                                                              Best in #Frontend Framework
                                                                                Average in #Frontend Framework
                                                                                  Top functions reviewed by kandi - BETA
                                                                                  kandi has reviewed vue-enterprise-boilerplate and discovered the below as its top functions. This is intended to give you an instant insight into vue-enterprise-boilerplate implemented functionality, and help decide if they suit your requirements.
                                                                                  • Loads a lazy component .
                                                                                    • Mounts login .
                                                                                      • Get namespace and namespace
                                                                                        • Set default authorization headers .
                                                                                          • Redirect to a route .
                                                                                            • retrieve the saved state from localStorage
                                                                                              • resolve relative path to a src
                                                                                                • Saves a key to storage .
                                                                                                  Get all kandi verified functions for this library.
                                                                                                  Get all kandi verified functions for this library.

                                                                                                  vue-enterprise-boilerplate Key Features

                                                                                                  Thorough documentation: Written with the same care as Vue's core docs to quickly train new team members and consolidate knowledge.
                                                                                                  Guaranteed consistency: Opinionated linting for Vue, JavaScript/JSON, SCSS, and Markdown, integrated into Visual Studio Code and run against staged files on pre-commit.
                                                                                                  First-class tests: Practice test-driven development with both unit and end-to-end tests. Unit tests with Jest live as first-class citizens alongside your source files, while Cypress provides reliable end-to-end tests in an intuitive GUI for development.
                                                                                                  Speedy development: Between configurable generators, handy aliases, and global base components, your productivity will skyrocket.

                                                                                                  vue-enterprise-boilerplate Examples and Code Snippets

                                                                                                  No Code Snippets are available at this moment for vue-enterprise-boilerplate.
                                                                                                  Community Discussions

                                                                                                  Trending Discussions on vue-enterprise-boilerplate

                                                                                                  vue global components with kebab case
                                                                                                  chevron right

                                                                                                  Trending Discussions on vue-enterprise-boilerplate

                                                                                                  QUESTION

                                                                                                  vue global components with kebab case
                                                                                                  Asked 2021-Jun-24 at 14:29

                                                                                                  I am trying to globally register my frequently used components. I have started using kebab casing because I am splitting my css, js and vue files up so I want to modify my existing registration script which looked like this:

                                                                                                  import Vue from "vue";
                                                                                                  import upperFirst from "lodash/upperFirst";
                                                                                                  import camelCase from "lodash/camelCase";
                                                                                                  
                                                                                                  const requireComponent = require.context(
                                                                                                    // The relative path of the components folder
                                                                                                    "./components",
                                                                                                    // Whether or not to look in subfolders
                                                                                                    false,
                                                                                                    // The regular expression used to match base component filenames
                                                                                                    /Base[A-Z]\w+\.(vue|js)$/
                                                                                                  );
                                                                                                  
                                                                                                  requireComponent.keys().forEach((fileName) => {
                                                                                                    // Get component config
                                                                                                    const componentConfig = requireComponent(fileName);
                                                                                                  
                                                                                                    // Get PascalCase name of component
                                                                                                    const componentName = upperFirst(
                                                                                                      camelCase(
                                                                                                        // Gets the file name regardless of folder depth
                                                                                                        fileName
                                                                                                          .split("/")
                                                                                                          .pop()
                                                                                                          .replace(/\.\w+$/, "")
                                                                                                      )
                                                                                                    );
                                                                                                  
                                                                                                    // Register component globally
                                                                                                    Vue.component(
                                                                                                      componentName,
                                                                                                      // Look for the component options on `.default`, which will
                                                                                                      // exist if the component was exported with `export default`,
                                                                                                      // otherwise fall back to module's root.
                                                                                                      componentConfig.default || componentConfig
                                                                                                    );
                                                                                                  });
                                                                                                  

                                                                                                  I have since found another here:

                                                                                                  https://raw.githubusercontent.com/bencodezen/vue-enterprise-boilerplate/main/src/components/_globals.js

                                                                                                  which I have modified and changed it to this:

                                                                                                  // Globally register all base components for convenience, because they
                                                                                                  // will be used very frequently. Components are registered using the
                                                                                                  // PascalCased version of their file name.
                                                                                                  
                                                                                                  import Vue from "vue";
                                                                                                  
                                                                                                  // https://webpack.js.org/guides/dependency-management/#require-context
                                                                                                  const requireComponent = require.context(
                                                                                                    // Look for files in the current directory
                                                                                                    "./components",
                                                                                                    // Do not look in subdirectories
                                                                                                    true,
                                                                                                    // Only include "_base-" prefixed .vue files
                                                                                                    /base-[\w-]+\.vue$/
                                                                                                  );
                                                                                                  
                                                                                                  // For each matching file name...
                                                                                                  requireComponent.keys().forEach((fileName) => {
                                                                                                    // Get the component config
                                                                                                    const componentConfig = requireComponent(fileName);
                                                                                                    // Get the PascalCase version of the component name
                                                                                                    const componentName = fileName
                                                                                                      // Remove the file extension from the end
                                                                                                      .replace(/\.\w+$/, "")
                                                                                                      // Split up kebabs
                                                                                                      .split("-")
                                                                                                      // Upper case
                                                                                                      .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
                                                                                                      // Concatenated
                                                                                                      .join("");
                                                                                                  
                                                                                                    console.log(componentName);
                                                                                                  
                                                                                                    // Globally register the component
                                                                                                    Vue.component(componentName, componentConfig.default || componentConfig);
                                                                                                  });
                                                                                                  

                                                                                                  But if I try to use my components, they don't work. I have this simple one defined like this:

                                                                                                  import { defineComponent } from "@vue/composition-api";
                                                                                                  
                                                                                                  export default defineComponent({
                                                                                                    name: "BaseToggle",
                                                                                                    props: {
                                                                                                      open: {
                                                                                                        type: Boolean,
                                                                                                      },
                                                                                                      color: {
                                                                                                        type: String,
                                                                                                      },
                                                                                                    },
                                                                                                  });
                                                                                                  

                                                                                                  and if I try to use it in any other component like this:

                                                                                                  
                                                                                                  

                                                                                                  or even

                                                                                                  
                                                                                                  

                                                                                                  I get this error:

                                                                                                  Does anyone have any idea what might be going wrong?

                                                                                                  The component is split into 3 files

                                                                                                  • base-toggle.component.scss
                                                                                                  • base-toggle.component.ts
                                                                                                  • base-toggle.component.vue

                                                                                                  and it exists in folder ./components/base-toggle. So I have updated my script to this:

                                                                                                  // Globally register all base components for convenience, because they
                                                                                                  // will be used very frequently. Components are registered using the
                                                                                                  // PascalCased version of their file name.
                                                                                                  
                                                                                                  import Vue from "vue";
                                                                                                  
                                                                                                  // https://webpack.js.org/guides/dependency-management/#require-context
                                                                                                  const requireComponent = require.context(
                                                                                                    // Look for files in the current directory
                                                                                                    "./components",
                                                                                                    // Do not look in subdirectories
                                                                                                    true,
                                                                                                    // Only include "_base-" prefixed .vue files
                                                                                                    /base-[\w-]+\.component.vue$/
                                                                                                  );
                                                                                                  
                                                                                                  // For each matching file name...
                                                                                                  requireComponent.keys().forEach((fileName) => {
                                                                                                    // Get the component config
                                                                                                    const componentConfig = requireComponent(fileName);
                                                                                                    // Get the PascalCase version of the component name
                                                                                                    const componentName = fileName
                                                                                                      // Remove the file extension from the end
                                                                                                      .replace(".component.vue", "")
                                                                                                      // Split up kebabs
                                                                                                      .split("-")
                                                                                                      // Upper case
                                                                                                      .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
                                                                                                      // Concatenated
                                                                                                      .join("");
                                                                                                  
                                                                                                    console.log(componentName);
                                                                                                  
                                                                                                    // Globally register the component
                                                                                                    Vue.component(componentName, componentConfig.default || componentConfig);
                                                                                                  });
                                                                                                  

                                                                                                  But this is still not working.

                                                                                                  ANSWER

                                                                                                  Answered 2021-Jun-24 at 14:29

                                                                                                  Turns out it was because of the folder. I updated my script to this:

                                                                                                  // Globally register all base components for convenience, because they
                                                                                                  // will be used very frequently. Components are registered using the
                                                                                                  // PascalCased version of their file name.
                                                                                                  
                                                                                                  import Vue from "vue";
                                                                                                  
                                                                                                  // https://webpack.js.org/guides/dependency-management/#require-context
                                                                                                  const requireComponent = require.context(
                                                                                                    // Look for files in the current directory
                                                                                                    "../components",
                                                                                                    // Do not look in subdirectories
                                                                                                    true,
                                                                                                    // Only include "_base-" prefixed .vue files
                                                                                                    /base-[\w\-.]+\.vue$/
                                                                                                  );
                                                                                                  
                                                                                                  // For each matching file name...
                                                                                                  requireComponent.keys().forEach((fileName) => {
                                                                                                    // Get the component config
                                                                                                    const componentConfig = requireComponent(fileName);
                                                                                                    // Get the PascalCase version of the component name
                                                                                                    const componentName = fileName
                                                                                                      // Remove any folder name
                                                                                                      .split("/")[1]
                                                                                                      // Remove the file extension from the end
                                                                                                      .replace(".component.vue", "")
                                                                                                      // Split up kebabs
                                                                                                      .split("-")
                                                                                                      // Upper case
                                                                                                      .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
                                                                                                      // Concatenated
                                                                                                      .join("");
                                                                                                  
                                                                                                    console.log(componentName);
                                                                                                  
                                                                                                    // Globally register the component
                                                                                                    Vue.component(componentName, componentConfig.default || componentConfig);
                                                                                                  });
                                                                                                  

                                                                                                  With the help of @Michal, I changed the regex, so now it's this:

                                                                                                  // Globally register all base components for convenience, because they
                                                                                                  // will be used very frequently. Components are registered using the
                                                                                                  // PascalCased version of their file name.
                                                                                                  
                                                                                                  import Vue from "vue";
                                                                                                  
                                                                                                  // https://webpack.js.org/guides/dependency-management/#require-context
                                                                                                  const requireComponent = require.context(
                                                                                                    // Look for files in the current directory
                                                                                                    "../components",
                                                                                                    // Do not look in subdirectories
                                                                                                    true,
                                                                                                    // Only include "_base-" prefixed .vue files
                                                                                                    /base-[\w-.]+\.vue$/
                                                                                                  );
                                                                                                  
                                                                                                  // For each matching file name...
                                                                                                  requireComponent.keys().forEach((fileName) => {
                                                                                                    // Get the component config
                                                                                                    const componentConfig = requireComponent(fileName);
                                                                                                    // Get the PascalCase version of the component name
                                                                                                    const componentName = fileName
                                                                                                      // Remove any folder name
                                                                                                      .split("/")[1]
                                                                                                      // Remove the file extension from the end
                                                                                                      .replace(/\.\w+$/, "")
                                                                                                      // Split up kebabs
                                                                                                      .split("-")
                                                                                                      // Upper case
                                                                                                      .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
                                                                                                      // Concatenated
                                                                                                      .join("");
                                                                                                  
                                                                                                    console.log(componentName);
                                                                                                  
                                                                                                    // Globally register the component
                                                                                                    Vue.component(componentName, componentConfig.default || componentConfig);
                                                                                                  });
                                                                                                  

                                                                                                  Source https://stackoverflow.com/questions/68116408

                                                                                                  Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                                                                                                  Vulnerabilities

                                                                                                  No vulnerabilities reported

                                                                                                  Install vue-enterprise-boilerplate

                                                                                                  You can download it from GitHub.

                                                                                                  Support

                                                                                                  This project includes a docs folder with more details on:.
                                                                                                  Find more information at:
                                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                  Find more libraries
                                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                  Save this library and start creating your kit
                                                                                                  CLONE
                                                                                                • HTTPS

                                                                                                  https://github.com/bencodezen/vue-enterprise-boilerplate.git

                                                                                                • CLI

                                                                                                  gh repo clone bencodezen/vue-enterprise-boilerplate

                                                                                                • sshUrl

                                                                                                  git@github.com:bencodezen/vue-enterprise-boilerplate.git

                                                                                                • Share this Page

                                                                                                  share link

                                                                                                  Reuse Pre-built Kits with vue-enterprise-boilerplate

                                                                                                  Consider Popular Frontend Framework Libraries

                                                                                                  Try Top Libraries by bencodezen

                                                                                                  bens-obsidian-boilerplate

                                                                                                  by bencodezenJavaScript

                                                                                                  obsidian-starter-kit

                                                                                                  by bencodezenJavaScript

                                                                                                  vuejs-101-workshop

                                                                                                  by bencodezenHTML

                                                                                                  obsidian-night-owl-theme

                                                                                                  by bencodezenCSS

                                                                                                  bencodezen

                                                                                                  by bencodezenCSS

                                                                                                  Compare Frontend Framework Libraries with Highest Support

                                                                                                  next.js

                                                                                                  by vercel

                                                                                                  vue

                                                                                                  by vuejs

                                                                                                  react

                                                                                                  by facebook

                                                                                                  storybook

                                                                                                  by storybookjs

                                                                                                  components

                                                                                                  by angular

                                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                                  Find more libraries
                                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                                  Save this library and start creating your kit