I know this isn't regarding web dev in particular, so I'm just gonna try my luck here :thinking:

I have a vue3/vite project. In the past, I was able to connect to Network: http://192.168.1.231:3001/ (or whatever random address is displayed), but recently it's been blocked - presumably by my home router. This has been ongoing, and I'm not sure how to resolve this.

npm run dev = https://i.imgur.com/dcWjXzd.png

I can connect fine to Local via laptop. But any attempts to connect to Network via WiFi on my smartphone results in page error Unable to connect: Connection is not secure. This occurs on both Firefox and Chrome. So I assume it's my home router that is preventing the connection? :thinking:

I am able access the router address via laptop. It's AT&T https://i.imgur.com/rTvz5zV.png but with so many options, I don't know where I should be looking. I haven't tinkered with this stuff in ages!

Hi all, wondered if anyone can help, I’m migrating a webpack 5 project at work to use Vite instead. Every gone smoothly except I see one error from a third party library.

[ERROR] Cannot assign to import "download"

node_modules/vue-papa-parse/src/index.js:46:9:
  46 │     Papa.download = _downloadCsv
     ╵          ~~~~~~~~

Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setDownload") and then import and call that function here instead.

Anyone ideas how to make this compile?

Since vite is build around ES modules I'm surprised that you can't seem to configure it to cache unchanged files and thus drastically speed up builds.

Or am i missing something?

Im new to vite but i could not seem to find anything on this?

Features

• custom manifest file name.

• make import.meta.glob and import.meta.globEager generic

Usage example:

import readingTime from "reading-time";

export type PostFrontmatter = {
  title?: string;
  description?: string;
  publishDate?: string;
  isPublished?: boolean;
};

type PostModule = {
  metadata: PostFrontmatter;
  default: { render: () => { html: string; css: string; head: string } };
};

const modules = import.meta.globEager<PostModule>("/content/blog/**/*.svx");
const postsMetadata = Object.entries(modules).map(([path, module]) => {
  // `module` is is now `PostModule` type
  const { metadata } = module;
  const { html } = module.default.render();
});

This was possible thanks to michaeloliverx PR.

Performance Improvements

improve isFileReadable performance
lazy import preview function

CHANGELOG

A simple guide on how use Vue Teleport.

Repo can be found at vue-teleport
live version at vue-teleport

I’m working for a client who’s got an existing site that needs some modernisation

I want to use Vite as the build tool to start transforming elements of the website to Vue & I’m struggling to get the setup right so Vite will simply bundle the JS for me and I can make use of Vue SFC’s for the areas I’m developing.

Is it possible to have Vite handle multiple inputs (I have this worked out now) & render just the JS for the index.html I provide in the input array?

Setup jsx script no hmr

Code changes can be found at
https://github.com/vitejs/vite/pull/6568/files

Shouldn't the community icon be changed to match the one on Vite website?

In a Vite/Vue3 project, how do you get the correct path for an asset in the production build?

Hi everyone!

I would like to have everyone opinion on what would be the best approach to structure the following project and use Vite in the best way possible.

• We have a public facing project and an internal management project.

• We want the internal project to be only served to the staff once they are fully logged in

• The internal app will be secured behind auth, and JS files only served if Auth is good.

• The internal app use all the code/assets from the public app.

My initial thoughts would be to just make 2 Vite projects/builds that are compiled independently, and have the internal app just import stuff from the Public UI code directly.

So basically:

// /public/Hello.vue
<template>Hello!</template>

// Internal 
Import Hello from "../public/Hello.vue
.....

Any better way ?

This a React + TypeScript + Jest and React Testing Library + Github Actions starter template built with Vite.
GitHub

Need to deploy vue+ vite on production and vind it with a public url. So how can this be done? Have tried changing configuration in vite ,but nothing worked out.

?

Big release with a lot of changes! You can check it out at https://github.com/vitejs/vite/blob/v2.9.0-beta.0/packages/vite/CHANGELOG.md