LineString Features in OpenLayers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var route = new ol.Feature({
  geometry: new ol.geom.LineString([
    ol.proj.fromLonLat([2.3522, 48.8566]),
    ol.proj.fromLonLat([2.2945, 48.8584]),
    ol.proj.fromLonLat([2.3272, 48.8606])
  ])
});
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({ features: [route] }),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#e63946', width: 4 })
  })
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.32, 48.86]), zoom: 14 })
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var route = new ol.Feature({
  geometry: new ol.geom.LineString([
    ol.proj.fromLonLat([2.3522, 48.8566]),
    ol.proj.fromLonLat([2.2945, 48.8584]),
    ol.proj.fromLonLat([2.3272, 48.8606])
  ])
});
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({ features: [route] }),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#e63946', width: 4 })
  })
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.32, 48.86]), zoom: 14 })
});