Vite Plugin Virtual Html: Make Vite MPA Consistent with Vue/cli

vite-plugin-virtual-html

Motivation

vite's MPA unlike @vue/cli's pages option have a configuration in dev mode.

vite's html file need to place in project's root to have same behavior in dev and production mode, it makes your project's root dir looks chaotic.

And if you follow vite's MPA, put other file in other directory, unlike index.html, you need useless middle directory(Ex. from vite's MPA doc http://localhost:3000/nested/nested.html) to located it.

so, i write this plugin to make vite's MPA more configurable and in dev mode or production has same behavior.

this plugin use vite's configureServer Hook to intercept html request and response the html content requested from browser.

update

0.2.9 add a new option injectCode to add some code before/after tag in html file
0.2.8 add a new option extraGlobPattern to customize fast-glob's pattern. Default pattern is ['**/*.html', '!node_modules/**/*.html', '!.**/*.html'], attention: if your config has problems, such as you didn't ignore dist, when build,it will occur error: new Error('[vite]: Rollup failed to resolve import "${id}" from "${importer}".\n'
0.2.6 pages now correctly identify multi-level directories
0.2.3 pages options now can set to true to allow all html in project.
0.2.1 now works fine with @vitejs/plugin-react.
0.2.0 has reworked, so config have a little change
1. plugin does not require your html exists, but you must provide a template file(as html)
2. page's config renamed to template
3. each page can have a independent render function
4. add a global config data, its' config will be covered by page's data
5. all you pages' will be treat as template file

features

allow you put your html file anywhere in your project(like @vue/cli's pages)
- when you run in dev,it will intercept html requests,and response with the html content which you set in pages.
- when you run build, it will copy files(reading config from pages options) under dist's sub-folder to dist folder, and then delete the rest html file.
auto config build.rollupOptions.input from pages
if your html do not have a module script import. plugin will try to add a js/ts script import using the html file's name.

Usage

yarn add vite-plugin-virtual-html --dev # npm install vite-plugin-virtual-html -D

Add it to vite.config.js

// vite.config.js
const virtualHtml = require('vite-plugin-virtual-html')

const pages = {
    index: '/src/index/index.html',
    login: '/src/login/login.html',
}

module.exports = {
  plugins: [virtualHtml({
  pages,
  indexPage: 'login'
  })],
}

Configuration

pages

config your project's all html/template file's path

it will be used for:

dev mode, it will intercept your html request, and response with html file in this config
build mode, inject into build.rollupOptions.input
when you build, plugin will copy all your config pages to project ROOT, and when build finished, the copied HTML file will auto remove from project ROOT.
if you want to use template system,you can send a object which contains template and data to render it. By default, it will return the html content in your HTML/template file, when you define a render function, it(html template) will rendered by your custom render function.

// all config 
{ 
    // 1. directly input html/template path
    login1: '/src/index/index.html', 
    // 2. a object with template
    login2: {
      template: '/src/login/login.html', // if there is no data prop, the login.html must only contain HTML content
    },
    // 3. a object with template and data, maybe with render
    login3: {
      template: '/src/login1/login1.html',
      data: {
        users: ['a', 'b', 'c']
      },
      // each page can have independent render function
      // render(template, data){
      //   return template
      // }
    }
}

notice:

if your html page contains any template content(such as <$= users.join(" | "); $>), you must contain template and data.
The pages options' key is the real HTML file after build
The pages options' key and value/ template file's name can different.
for example 1, you can access login1.html when dev mode, and it will generate a login1.html when build.
when pages set to true, the template.html will only generate ONLY ONE html file

indexPage

config the index page

Ex. when you open http://localhost:3000, your project's root dir has no index.html file, then browser will show 404.

now, if you set this, plugin will intercept / request, and response with page you set.

Like this: when you set indexPage to login,then you access http://localhost:3000 in browser, it will show the /login.html page.

it equals to access http://localhost:3000/login.html.

render

from 0.1.0 , you can use render function to render html template. i have just test in ejs, but i think other template system will(maybe) work correctly.

extraGlobPattern

Customize fast-glob's pattern When set this options, it will replace default fast-glob pattern, it's default value is ['**/*.html', '!node_modules/**/*.html', '!.**/*.html']

injectCode

options

In html file, put replacementbefore/after find

NOTICE

if you use same template file for multiple page, plese make sure the page's key is different.
please DO NOT use this plugin when you build a library(you can use this in dev NOT in build)

Author: windsonR
Source code: https://github.com/windsonR/vite-plugin-virtual-html
License: MIT license

#vite #vue #html #typescript

What is GEEK

Buddha Community

Vite Plugin Virtual Html: Make Vite MPA Consistent with Vue/cli

Noemi Hintz

1656651600

Vite Plugin Virtual Html: Make Vite MPA Consistent with Vue/cli

vite-plugin-virtual-html

中文文档

Motivation

vite's MPA unlike @vue/cli's pages option have a configuration in dev mode.

vite's html file need to place in project's root to have same behavior in dev and production mode, it makes your project's root dir looks chaotic.

so, i write this plugin to make vite's MPA more configurable and in dev mode or production has same behavior.

this plugin use vite's configureServer Hook to intercept html request and response the html content requested from browser.

update

0.2.9 add a new option injectCode to add some code before/after tag in html file
0.2.8 add a new option extraGlobPattern to customize fast-glob's pattern. Default pattern is ['**/*.html', '!node_modules/**/*.html', '!.**/*.html'], attention: if your config has problems, such as you didn't ignore dist, when build,it will occur error: new Error('[vite]: Rollup failed to resolve import "${id}" from "${importer}".\n'
0.2.6 pages now correctly identify multi-level directories
0.2.3 pages options now can set to true to allow all html in project.
0.2.1 now works fine with @vitejs/plugin-react.
0.2.0 has reworked, so config have a little change
1. plugin does not require your html exists, but you must provide a template file(as html)
2. page's config renamed to template
3. each page can have a independent render function
4. add a global config data, its' config will be covered by page's data
5. all you pages' will be treat as template file

features

allow you put your html file anywhere in your project(like @vue/cli's pages)
- when you run in dev,it will intercept html requests,and response with the html content which you set in pages.
- when you run build, it will copy files(reading config from pages options) under dist's sub-folder to dist folder, and then delete the rest html file.
auto config build.rollupOptions.input from pages
if your html do not have a module script import. plugin will try to add a js/ts script import using the html file's name.

Usage

yarn add vite-plugin-virtual-html --dev # npm install vite-plugin-virtual-html -D

Add it to vite.config.js

// vite.config.js
const virtualHtml = require('vite-plugin-virtual-html')

const pages = {
    index: '/src/index/index.html',
    login: '/src/login/login.html',
}

module.exports = {
  plugins: [virtualHtml({
  pages,
  indexPage: 'login'
  })],
}

Configuration

pages

config your project's all html/template file's path

it will be used for:

dev mode, it will intercept your html request, and response with html file in this config
build mode, inject into build.rollupOptions.input
when you build, plugin will copy all your config pages to project ROOT, and when build finished, the copied HTML file will auto remove from project ROOT.
if you want to use template system,you can send a object which contains template and data to render it. By default, it will return the html content in your HTML/template file, when you define a render function, it(html template) will rendered by your custom render function.

// all config 
{ 
    // 1. directly input html/template path
    login1: '/src/index/index.html', 
    // 2. a object with template
    login2: {
      template: '/src/login/login.html', // if there is no data prop, the login.html must only contain HTML content
    },
    // 3. a object with template and data, maybe with render
    login3: {
      template: '/src/login1/login1.html',
      data: {
        users: ['a', 'b', 'c']
      },
      // each page can have independent render function
      // render(template, data){
      //   return template
      // }
    }
}

notice:

if your html page contains any template content(such as <$= users.join(" | "); $>), you must contain template and data.
The pages options' key is the real HTML file after build
The pages options' key and value/ template file's name can different.
for example 1, you can access login1.html when dev mode, and it will generate a login1.html when build.
when pages set to true, the template.html will only generate ONLY ONE html file

indexPage

config the index page

Ex. when you open http://localhost:3000, your project's root dir has no index.html file, then browser will show 404.

now, if you set this, plugin will intercept / request, and response with page you set.

Like this: when you set indexPage to login,then you access http://localhost:3000 in browser, it will show the /login.html page.

it equals to access http://localhost:3000/login.html.

render

from 0.1.0 , you can use render function to render html template. i have just test in ejs, but i think other template system will(maybe) work correctly.

extraGlobPattern

Customize fast-glob's pattern When set this options, it will replace default fast-glob pattern, it's default value is ['**/*.html', '!node_modules/**/*.html', '!.**/*.html']

injectCode

options

In html file, put replacementbefore/after find

NOTICE

if you use same template file for multiple page, plese make sure the page's key is different.
please DO NOT use this plugin when you build a library(you can use this in dev NOT in build)

Author: windsonR
Source code: https://github.com/windsonR/vite-plugin-virtual-html
License: MIT license

#vite #vue #html #typescript

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Earlene Rowe

1589639315

Vue CLI plugin development.

Problem statement

To create a CLI command, which can create a boilerplate for me(like how vue create does). But for my use case, I want to add some predefined packages, scripts, husky. To enforce some rules (best practices), So everyone in my organization will be on the same page.
And also, to allow the developer to select some inhouse npm packages so that based on the selection, those packages will be installed, and even some code will be injected into the files dynamically.

Why I am writing this article

To achieve the above problem statement, I researched a lot and came to know about vue-CLI-plugin-development, which has excellent documentation but a lack of good examples. So I thought of writing one article which can help you to solve some of the things when you are building a CLI plugin. Let us start.

#vuejs #vue #vue-cli #vue-plugin

Ava Watson

1595318322

Know Everything About HTML With HTML Experts

HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.

The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.

Basics of HTML are-

The simple fundamental components oh HTML is

Head- the setup information for the program and web pages is carried in the head
Body- the actual substance that is to be shown on the web page is carried in the body
HTML- information starts and ends with and labels.
Comments- come up in between

Html versions timeline

HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
HTML 2- November, 1995
HTML 3- January, 1997
HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
HTML 5- October, 2014; November, 2016; December, 2017

HTML draft version timelines are

October 1991
June 1992
November 1992
June 1993
November 1993
November 1994
April 1995
January 2008
HTML 5-
2011, last call
2012 candidate recommendation
2014 proposed recommendation and recommendation

HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.

Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.

#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html

Jammie Yost

1656932400

Vue Cli Plugin Vite: Use Vite today, with Vue-cli.

Use Vite Today

out-of-the-box for vue-cli projects without any codebase modifications.

demo/boilerplate

Usage

# 1. first step
vue add vite

# 2. second step
# NOTE you cannot directly use `vite` or `npx vite` since it is origin vite not this plugin.
yarn vite // or npm run vite

# 3. add optimizeDeps#include (optional and will speedup devServer start time a lot)
# added in vue.config.js#pluginOptions.vite.optimizeDeps.include
# e.g.: ['vue', 'vue-router', 'vuex']
# all scanned deps(logged in terminal) can be added for speedup.

Motivation

We have lots of exists vue-cli(3.x / 4.x) projects.
In Production: vue-cli based on webpack is still the best practice for bundling webapp(with code spliting, legecy-build for old browsers).
In Development: instant server start and lightning fast HMR by vite is interesting.
Why not use them together ?

Options

// vue.config.js
{
  // ...
  pluginOptions: {
    vite: {
      /**
       * Plugin[]
       * @default []
       */
      plugins: [], // other vite plugins list, will be merge into this plugin\'s underlying vite.config.ts
      /**
       * Vite UserConfig.optimizeDeps options
       * recommended set `include` for speedup page-loaded time, e.g. include: ['vue', 'vue-router', '@scope/xxx']
       * @default {}
       */
      optimizeDeps: {},
      /**
       * type-checker, recommended disabled for large-scale old project.
       * @default false
       */
      disabledTypeChecker: true,
      /**
       * lint code by eslint
       * @default false
       */
      disabledLint: false,
    }
  },
}

see all

Underlying principle

Compatibility

NO EXTRA files, code and dependencies injected
- injected one devDependency vue-cli-plugin-vite
- injected one line code in package.json#scripts#vite and one file at bin/vite
auto-resolved as much options as we can from vue.config.js (publicPath, alias, outputDir...)
auto reuse public/index.html as vite html entry template
compatible the differences between vue-cli and vite(environment variables, special syntax...)

Differences between vue-cli and vite

Dimension	vue-cli	vite
Plugin	1. based on webpack. 2. have service and generator lifecycles. 3. hooks based on each webpack plugin hooks	1. based on rollup. 2. no generator lifecycle. 3. universal hooks based on rollup plugin hooks and vite self designed
Environment Variables	1. loaded on process.env. 2. prefixed by `VUE_APP_`. 3. client-side use `process.env.VUE_APP_XXX` by webpack definePlugin	1. not loaded on process.env. 2. prefixed by `VITE_`. 3. client-side use `import.meta.env.VITE_XXX` by vite inner define plugin
Entry Files	1. main.{js,ts}.	1. *.html
Config File	1. vue.config.js	1. vite.config.ts. 2. support use --config to locate
MPA Support	1. native support by `options.pages`. 2. with history rewrite support	1. native support by `rollupOptions.input`
Special Syntax	1. require(by webpack) 2. require.context(by webpack) 2. use `~some-module/dist/index.css`(by `css-loader`) 3. module.hot for HMR	1. import.meta.glob/globEager 2. native support by vite, use `module/dist/index.css` directly 3. import.meta.hot for HMR
Local devServer	1. webpack dev-server 2. express-style middleware and many extension api.	1. connect 2. connect middleware
Type Checker	1. fork-ts-checker-webpack-plugin	1. No built-in, we can use vite-plugin-checker(based on vetur and vue-tsc)
Lint	1. @vue/cli-plugin-eslint	1. No built-in we can use vite-plugin-eslint,
Jest	1. @vue/cli-plugin-jest	1. will have first-class jest support

Milestones

Done ✅ vs WIP ⬜️ vs ❌ Won't support
✅ Plugin
- ✅ we can do nothing but rewrite corresponding vite-plugin, most code and tools can be reused
✅ Environment Variables Compatibility
- ✅ load to process.env.XXX (all env with or without prefix will be loaded)
- ✅ recognize VUE_APP_ prefix
- ✅ define as process.env.${PREFIX}_XXX for client-side
✅ Entry Files (we can do nothing)
✅ Config File (vue.config.js Options auto-resolved)
- ✅ vite#base - resolved from process.env.PUBLIC_URL || vue.config.js#publicPath || baseUrl
- ✅ vite#css - resolved from vue.config.js#css
  - ✅ preprocessorOptions: css.loaderOptions
- ✅ vite#server- resolved from vue.config.js#devServer
  - ✅ host - resolved from process.env.DEV_HOST || devServer.public
  - ✅ port - resolved from Number(process.env.PORT) || devServer.port
  - ✅ https - resolved from devServer.https
  - ✅ open - resolved from process.platform === 'darwin' || devServer.open
  - ✅ proxy - resolved from devServer.proxy
  - ✅ before
    - use middlewares to improve viteDevServer(connect instance) to express instance
- ✅ vite#build
  - ✅ outDir - resolved from vue.config.js#outputDir
  - ✅ cssCodeSplit - resolved from css.extract
  - ✅ sourcemap - resolved from process.env.GENERATE_SOURCEMAP === 'true' || productionSourceMap || css.sourceMap
- ✅ Alias - resolved from configureWebpack or chainWebpack
  - ✅ also resolved from vue.config.js#runtimeCompiler
✅ MPA Support
- ✅ same development experience and build result
✅ Build Support (as of 1.0.0-rc.0, no real html entry file generated, just reuse public/index.html of vue-cli)
- ✅ Support SPA Build
- ✅ Support MPA Build
✅ Special Synatax
- ❌ require('xxx') or require('xxx').default, most of the case, it can be replaced by dynamicImport ( import('xxx') or import('xxx').then(module => module.default) )
- ✅ import '~some-module/theme/index.css' syntax for Import CSS supported by vite#2185)
- ✅ import '~@some-module/theme/index.css' syntax for Import CSS supported by vite#2185)
- ✅ ~public & ~/public support
- ✅ require.context compatibility
- ✅ module.hot compatibilite
✅ Type Checker
- ✅ vite-plugin-checker & vite-plugin-checker-vls
✅ Lint
- ✅ vite-plugin-eslint
⬜️ Eject and Codemod
- ⬜️ eject vite.config.ts
- ⬜️ eject vite deps
- ⬜️ remove vue-cli and webpack deps
- ⬜️ codemod webpack special syntax to vite-specific( import.meta.{hot, env} )

Examples

you can clone/fork this repo, under examples/*

Troubleshooting

see #9

Benefits

Best development-experience right now

Instant server start and lightning fast HMR

Migration to vite smoothly

In the future, migration to vite is only the replacement of special syntax between webpack and vite

Lint the codebase

lint dependencies, which is incorrectly use main/module/exports field in package.json
lint codebase, which is more es-module compatible
- use import('xxx') not require('xxx')
- ~~use~~ ~~import.meta.xxx~~ ~~not~~ module.xxx

Use vue-cli ecosystem

first-class eslint/stylelint integration
first-class unit-test integration (by @vue/cli-plugin-unit-jest)
first-class e2e integration (by @vue/cli-plugin-cypress)
first-class xyz support by the official and community plugins

Relevant Vite Plugins

vite-plugin-vue2@underfin - Vue 2 support for vite.
@vitejs/plugin-vue - Official Vue 3 plugin.
@vitejs/plugin-vue-jsx - Official Vue 3 jsx plugin.
vite-plugin-vue-cli@IndexXuan - Infer vite config from vue.config.js.
vite-plugin-html-template@IndexXuan - Like html-webpack-plugin for webpack.
vite-plugin-mpa@IndexXuan - MPA support for vite.
vite-plugin-checker@fi3ework - Type checker for vite.
vite-plugin-eslint@gxmari007 - Eslint for vite.
vite-plugin-env-compatible@IndexXuan - Env compatibility for vite with vue-cli.

Author: IndexXuan
Source Code: https://github.com/IndexXuan/vue-cli-plugin-vite
License: MIT license

#vue #vite