https://github.com/williamyorkl/vite-plugin-vue2-suffix

A plugin solve missing '*.vue' suffix problem transform webpack to vite in vue2
https://github.com/williamyorkl/vite-plugin-vue2-suffix

Last synced: about 2 months ago
JSON representation

A plugin solve missing '*.vue' suffix problem transform webpack to vite in vue2

• Host: GitHub
• URL: https://github.com/williamyorkl/vite-plugin-vue2-suffix
• Owner: williamyorkl
• License: mit
• Created: 2021-08-18T01:48:52.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-08T02:56:53.000Z (almost 3 years ago)
• Last Synced: 2024-04-19T01:34:26.144Z (5 months ago)
• Language: JavaScript
• Size: 32.2 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v2 - Compatible without '.vue' suffix. (Plugins / Vue)
• awesome-vite - v2 - Compatible without '.vue' suffix. (Plugins / Vue)

README

        
# vite-plugin-vue2-suffix

> it has been official inclued [detail](https://github.com/vitejs/awesome-vite#helpers-1)

### A plugin solve missing '\*.vue' suffix problem transform webpack to vite in vue2




## Usage

Install

```bash

npm i vite-plugin-vue2-suffix -D

```

Add it to `vite.config.js`

```js

// vite.config.js

import { createVuePlugin } from "vite-plugin-vue2";

import VitePluginVue2Suffix from "vite-plugin-vue2-suffix";

export default {

  plugins: [createVuePlugin(), VitePluginVue2Suffix()],

};

```

That's all.

### Situation 1

> components using in another components

it will automatically turn this

```vue

  


    

    

  


import ComponentA from "./components/ComponentA";

export default {

  components: {

    ComponentA,

  },

};

```

into this

```vue

  


    

    

  


import ComponentA from "./components/ComponentA/index.vue";

/** or if your component is in a outside path  */

// import ComponentA from './components/ComponentA.vue'

export default {

  components: {

    ComponentA,

  },

};

```

### Situation 2

> components using in routes

also, it will turn this:

```js

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

const routerMap = [

  {

    path: "/news",

    component: () => import("../components/News"),

  },

];

export default new Router({

  scrollBehavior: () => ({

    y: 0,

    x: 0,

  }),

  routes: routerMap,

});

```

into this below:

```js

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

const routerMap = [

  {

    path: "/news",

    component: () => import("../components/News.vue"),

    /** or if your component is in a inside path */

    // component: () => import('../components/News/index.vue')

  },

];

export default new Router({

  scrollBehavior: () => ({

    y: 0,

    x: 0,

  }),

  routes: routerMap,

});

```

## License

MIT License © 2021 [williamyorkl](https://github.com/williamyorkl)